Topic Wiki

Training
Codecademy.com offers hand on courses for  various coding languages including HTML, JavaScript, CSS, and more. FREE
TreeHouse.com 8)
w3schools.com
regex

Resources
Browser compatibility
Can i use

To test/show-of your skills
html - css - js
http://codepen.io/pen/
http://jsfiddle.net/

My sql
www.sqlfiddle.com

Editor
notepad-plus-plus.org/

android development
http://developer.android.com/sdk/index.html

js librery
http://greensock.com/ nice animation
getbootstrap.com/css/ responsive layout
jquery.com do more write less

Free Books
http://it-ebooks.info/

Test client browser version
http://browser-update.org/
« Last edited by yesitsme on May 17, 2015, 11:13:37 AM »

Author Topic: Programming for Beginners  (Read 105389 times)

Online etech0

  • Dansdeals Lifetime 10K Presidential Platinum Elite
  • *******
  • Join Date: Dec 2013
  • Posts: 12823
  • Total likes: 3267
  • DansDeals.com Hat Tips 1
    • View Profile
  • Location: not lakewood
  • Programs: DDF
Re: Programming for Beginners
« Reply #420 on: September 13, 2020, 06:36:15 PM »
Is this commonly used? From googling it, seems like it's pretty much for forums
It's commonly used for forums
Workflowy. You won't know what you're missing until you try it.

Offline DanH

  • Dansdeals Lifetime Platinum Elite
  • *******
  • Join Date: Oct 2011
  • Posts: 2181
  • Total likes: 26
  • DansDeals.com Hat Tips 2
    • View Profile
Re: Programming for Beginners
« Reply #421 on: September 30, 2020, 03:03:15 PM »
Nice series for beginners..



You can watch older years as well, just search cs50.  There's a site to do it in an organized fashion:
https://cs50.harvard.edu/x
For tech help feel free to Telegram me @DanTechSupp

Offline Cholentfresser

  • Dansdeals Lifetime Platinum Elite
  • *******
  • Join Date: Mar 2009
  • Posts: 1920
  • Total likes: 49
  • DansDeals.com Hat Tips 1
    • View Profile
Re: Programming for Beginners
« Reply #422 on: September 30, 2020, 04:50:01 PM »
Nice series for beginners..



You can watch older years as well, just search cs50.  There's a site to do it in an organized fashion:
https://cs50.harvard.edu/x
Excellent video. Next time someone asks me about binary, I'm gonna send them this :)
In order to understand recursion, you first need to understand recursion.

Offline yesitsme

  • Dansdeals Lifetime Presidential Platinum Elite
  • *********
  • Join Date: Dec 2014
  • Posts: 5020
  • Total likes: 2237
  • DansDeals.com Hat Tips 4
  • Gender: Male
    • View Profile
Re: Programming for Beginners
« Reply #423 on: February 02, 2021, 12:19:18 AM »
["-"]

Offline yakov116

  • Dansdeals Lifetime Platinum Elite
  • *******
  • Join Date: May 2014
  • Posts: 1556
  • Total likes: 205
  • DansDeals.com Hat Tips 1
  • Gender: Male
    • View Profile
Re: Programming for Beginners
« Reply #424 on: April 25, 2021, 11:21:32 AM »
If anyone wants they can try this out https://github.com/TroubleMacher/at-bash.

Not something I made rather I did a quick rewrite (code and site can be improved help wanted)
Money talks...mine says goodbye!

Online Yo ssi

  • Dansdeals Lifetime Presidential Platinum Elite
  • *********
  • Join Date: Aug 2019
  • Posts: 6552
  • Total likes: 2509
  • DansDeals.com Hat Tips 59
  • Gender: Male
    • View Profile
Re: Programming for Beginners
« Reply #425 on: April 25, 2021, 12:44:19 PM »
_    ,
' )  /
 /  / __   _   _   o
(__/_(_)  /_)_/_)_<_
 //
(/

Offline chff

  • Dansdeals Lifetime Presidential Platinum Elite
  • *********
  • Join Date: Jul 2012
  • Posts: 5891
  • Total likes: 680
  • DansDeals.com Hat Tips 25
    • View Profile
  • Location: NYC (not anymore)
  • Programs: All of them...
Re: Programming for Beginners
« Reply #426 on: April 28, 2021, 10:02:39 PM »
Best Java books?

Offline ShmuliT

  • Dansdeals Lifetime Platinum Elite
  • *******
  • Join Date: Dec 2009
  • Posts: 1508
  • Total likes: 36
  • DansDeals.com Hat Tips 21
  • Gender: Male
    • View Profile
Re: Programming for Beginners
« Reply #427 on: December 30, 2022, 02:53:37 PM »
Is there a simple way to skip to the final page of an online course run on javascript?
Ie instead of waiting for the narration/video to finish and each next button to pop up and then clicking it.

Offline yesitsme

  • Dansdeals Lifetime Presidential Platinum Elite
  • *********
  • Join Date: Dec 2014
  • Posts: 5020
  • Total likes: 2237
  • DansDeals.com Hat Tips 4
  • Gender: Male
    • View Profile
Re: Programming for Beginners
« Reply #428 on: December 30, 2022, 03:30:21 PM »
it really depends what the js does, if its intelligent enough and records everything to the backend you may not have many options
["-"]

Online Euclid

  • Dansdeals Presidential Platinum Elite
  • ********
  • Join Date: Jun 2010
  • Posts: 4865
  • Total likes: 6023
  • DansDeals.com Hat Tips 4
    • View Profile
Re: Programming for Beginners
« Reply #429 on: December 30, 2022, 03:34:57 PM »
Is there a simple way to skip to the final page of an online course run on javascript?
Ie instead of waiting for the narration/video to finish and each next button to pop up and then clicking it.
defensive driving course, eh?

Offline Definitions

  • Dansdeals Lifetime Platinum Elite
  • *******
  • Join Date: Jan 2018
  • Posts: 1748
  • Total likes: 479
  • DansDeals.com Hat Tips 3
    • View Profile
Re: Programming for Beginners
« Reply #430 on: January 01, 2023, 09:48:38 AM »
defensive driving course, eh?
Lol you tried doing that?
Did the course at www.12dollarschoolonline.com it says its for NJ but I vaguely remembering seeing clone websites. Hopefully I actually get a discount from my insurance.
I saved the quizzes and the reading material. I posted the quizzes and final test in the wiki. The material was too long to post but if anyone wants it you can pm me or ask here and I'll figure something out.

I tried bypassing the timer but it seems like they have a server side session tracker so I don't know of a way to get around the timer for each chapter. Just had to let it run in the background.
My Tapatalk notifications don't always work.

Online Definitions2

  • Dansdeals Gold Elite
  • ***
  • Join Date: Aug 2023
  • Posts: 144
  • Total likes: 126
  • DansDeals.com Hat Tips 0
    • View Profile
  • Location: Lakewood
Re: Programming for Beginners
« Reply #431 on: January 10, 2024, 11:01:36 PM »
I took a course in javascript a while ago but forgot basically everything. I wanted to refresh my memory a bit. So I made a Monty Hall game thing. I don't like the flow and I'm looking for tips to improve it. It's quite long  but any tips are appreciated

(I know there are some things missing like restart and preventing clicks after revealing. My main focus is how to control the flow which I think isn't that good)

Thanks

Code: [Select]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #playArea {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background-color: gray;
      }
      form {
        display: table;
      }
      p {
        display: table-row;
      }
      label {
        display: table-cell;
      }
      input {
        display: table-cell;
      }
      input.textinput {
        margin-left: 1em;
      }

      .door {
        display: flex;
        justify-content: center;
        width: 200px;
        background-color: brown;
        border-color: black;
        margin: 10px;
        height: 300px;
        border-width: 10px;
        border-style: solid;
        box-sizing: border-box;
        text-align: center;
        font-size: 34px;
        color: blue;
        overflow: hidden;
      }
      .selectedDoor {
        display: flex;
        justify-content: center;
        width: 200px;
        background-color: brown;
        border-color: yellow;
        margin: 10px;
        height: 300px;
        border-width: 10px;
        border-style: solid;
        box-sizing: border-box;
        text-align: center;
        font-size: 34px;
        color: blue;
        overflow: hidden;
      }
      .openDoor {
        display: flex;
        justify-content: center;
        width: 200px;
        background-image: url("https://i.ibb.co/G2G8FqS/Donkey.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        background-color: antiquewhite;
        border-color: black;
        margin: 10px;
        height: 300px;
        border-width: 10px;
        border-style: solid;
        box-sizing: border-box;
        text-align: center;
        font-size: 34px;
        color: blue;
        overflow: hidden;
      }

      .playerWon {
        display: flex;
        justify-content: center;
        width: 200px;
        background-image: url("https://i.ibb.co/C9pLnp5/car.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        border-color: rgb(10, 241, 10);
        margin: 10px;
        height: 300px;
        border-width: 10px;
        border-style: solid;
        box-sizing: border-box;
        text-align: center;
        font-size: 34px;
        color: blue;
        overflow: hidden;
      }
      .playerLost {
        display: flex;
        justify-content: center;
        width: 200px;
        background-image: url("https://i.ibb.co/G2G8FqS/Donkey.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        border-color: rgb(241, 10, 10);
        margin: 10px;
        height: 300px;
        border-width: 10px;
        border-style: solid;
        box-sizing: border-box;
        text-align: center;
        font-size: 34px;
        color: blue;
        overflow: hidden;
      }
      .lastDoor {
        display: flex;
        justify-content: center;
        width: 200px;
        background-image: url("https://i.ibb.co/G2G8FqS/Donkey.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        border-color: black;
        margin: 10px;
        height: 300px;
        border-width: 10px;
        border-style: solid;
        box-sizing: border-box;
        text-align: center;
        font-size: 34px;
        color: blue;
        overflow: hidden;
      }

      .door:hover {
        background-color: yellow;
      }

      .modal-container {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
      }

      .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
      }
    </style>
  </head>
  <body>
    <form>
      <p>
        <label for="numOfDoors">How many doors do you want? </label>
        <input
          id="numOfDoors"
          type="number"
          class="textinput"
          required
          min="3"
          max="100"
          value="3"
        />
      </p>
      <input type="submit" value="Generate" id="generateButton" />
    </form>

    <div id="playArea"></div>

    <script>
      (function () {
        let playArea = document.getElementById("playArea");
        let numOfDoors = document.getElementById("numOfDoors");
        let generateButton = document.getElementById("generateButton");

        generateButton.addEventListener("click", start);
        let wins = 0;
        let losses = 0;
        let playerChoice;
        let winningDoor;
        let doors = [];
        let losingDoor;
        let inMiddleOfGame = false;

        function start(e) {
          e.preventDefault();
          if (!inMiddleOfGame) {
            inMiddleOfGame = true;
            //generating doors
            for (let j = 0; j < Number(numOfDoors.value); j++) {
              doors.push({
                id: j,
                isOpened: false,
                isPrize: false,
              });
              playArea.insertAdjacentHTML(
                "beforeend",
                `<div class="door" id="door${j}">${j + 1} </div>`
              );
            }
            let foo = document.querySelectorAll(".door");
            for (let i = 0; i < foo.length; i++) {
              //have to use .bind in order to pass the property to the setup function
              foo[i].addEventListener("click", setup.bind(null, i));
            }
          }
        }

        function setup(doorId) {
          playerChoice = doorId;
          document.getElementById(`door${playerChoice}`).className =
            "selectedDoor";

          //setting winning door and getting players door
          winningDoor = Math.floor(Math.random() * doors.length);
          console.log(`winning door at initialization is ${winningDoor}`);
          doors[winningDoor].isPrize = true;

          doors.forEach((door) => {
            if (door.id !== playerChoice && door.isPrize == false) {
              door.isOpened = true;
            }
          });

          //I'm going to assume that the players choice is the losing door. This makes it cleaner later on when revealing the doors.
          losingDoor = playerChoice;

          //if the player chose the prize make sure to close a random door (and change the losing door). otherwise only one door will be left closed.
          if (playerChoice === winningDoor) {
            let foundLosingDoor = false;
            while (foundLosingDoor === false) {
              losingDoor = Math.floor(Math.random() * doors.length);
              if (losingDoor !== winningDoor) {
                foundLosingDoor = true;
                doors[losingDoor].isOpened = false;
              }
            }
          }

          //go through the door objects and actually open them
          doors.forEach((door) => {
            if (door.isOpened == true) {
              document.getElementById(`door${door.id}`).classList = "openDoor";
            }
          });
          //I have to add a timeout otherwise it goes directly to the doorchangeprompt function without waiting for door elements to be created.
          //Apparently adding elements is asynchronous. So setTimeout adds it to the bottom of the event queue allowing the elements to be created first and then the prompt function to be called.
          //At least that's what I think is happening.
          setTimeout(() => {
            doorChangePrompt();
          }, 1000);
        }

        //asking if you want to switch
        function doorChangePrompt() {
          let modalContainer = document.createElement("div");
          modalContainer.classList.add("modal-container");

          // Create modal content
          let modalContent = document.createElement("div");
          modalContent.classList.add("modal-content");
          modalContent.innerHTML =
            "<p>Would you like to keep your selection or change it?</p>";

          let modalButtonYes = document.createElement("button");
          modalButtonYes.innerText = "Keep";
          modalButtonYes.classList.add("modal-button");
          let modalButtonNo = document.createElement("button");
          modalButtonNo.innerText = "Change";
          modalButtonNo.classList.add("modal-button");

          // Append content to container
          modalContainer.appendChild(modalContent);
          modalContent.appendChild(modalButtonYes);
          modalContent.appendChild(modalButtonNo);
          // Append modal to body
          document.body.appendChild(modalContainer);

          // Show modal
          modalContainer.style.display = "block";

          // Close modal when clicking either button
          let closeButton = modalContent.querySelectorAll(".modal-button");
          closeButton.forEach((button) => {
            button.addEventListener("click", (event) => {
              modalContainer.style.display = "none";
              processPlayerResponse(event.target.innerText);
            });
          });
        }

        function processPlayerResponse(playersAnswer) {
          if (playersAnswer === "Change" && playerChoice === winningDoor) {
            playerChoice = losingDoor;
            console.log("you lost");
            losses++;
          } else if (
            playersAnswer === "Change" &&
            playerChoice === losingDoor
          ) {
            playerChoice = winningDoor;
            console.log("you won");
            wins++;
          }

          if (playersAnswer === "Keep" && playerChoice === winningDoor) {
            console.log("you won");
            wins++;
          } else if (playersAnswer === "Keep" && playerChoice === losingDoor) {
            //technically not necessary to check if playerChoice===losingDoor since we already set losingDoor to playerChoice in the beginning
            console.log("you lost");
            losses++;
          }
          revealDoors();
        }

        function revealDoors() {
          if (playerChoice == winningDoor) {
            document.getElementById(`door${playerChoice}`).classList =
              "playerWon";
            document.getElementById(`door${losingDoor}`).classList = "lastDoor";
          } else {
            document.getElementById(`door${playerChoice}`).classList =
              "playerLost";
            document.getElementById(`door${winningDoor}`).classList =
              "lastDoor";
            document.getElementById(
              `door${winningDoor}`
            ).style.backgroundImage = "url('https://i.ibb.co/C9pLnp5/car.png')";
          }
          console.log(
            `in revealDoors: winningDoor =${winningDoor}, losingDoor= ${losingDoor}, playerChoice = ${playerChoice}`
          );
        }
      })();
    </script>
  </body>
</html>

Offline Jojo202

  • Dansdeals Platinum Elite + Lifetime Silver Elite
  • *****
  • Join Date: Jun 2020
  • Posts: 585
  • Total likes: 191
  • DansDeals.com Hat Tips 0
    • View Profile
  • Location: Brooklyn, NY
Re: Programming for Beginners
« Reply #432 on: January 11, 2024, 12:43:31 AM »
Sorry to be that guy... but here is what ChatGpt had to say about it: (let us know if it was any good)

Your Monty Hall game looks interesting! I've reviewed your code and have a few suggestions to improve the flow and structure:

1. **Separation of Concerns:**
   - Consider breaking down your code into smaller functions with specific responsibilities. This makes the code more modular and easier to understand.
   - For example, you can have separate functions for generating doors, handling player choice, revealing doors, and updating the UI.

2. **Event Delegation:**
   - Instead of attaching a separate event listener to each door, you can use event delegation by attaching a single event listener to the parent container (`#playArea`). This can help improve performance and simplify the code.

3. **Use CSS Classes for Styling:**
   - Instead of directly manipulating `classList` in JavaScript, consider using CSS classes. It makes your JavaScript cleaner, and you can define styles in your CSS.

4. **Avoid Global Variables:**
   - Try to minimize the use of global variables. In your case, you could encapsulate your game logic within an object or a class.

5. **Reuseable Modal Function:**
   - Consider creating a reusable function for displaying modal dialogs. This can help reduce code duplication.

6. **Consistent Naming:**
   - Make sure your variable and function names are consistent and descriptive. For example, use camelCase consistently throughout your code.

These are just a few suggestions to enhance the structure and maintainability of your code. Feel free to adapt them based on your preferences and requirements.

Here's a modified version of your code incorporating some of these suggestions:

Code: [Select]
(function () {
  const playArea = document.getElementById("playArea");
  const numOfDoorsInput = document.getElementById("numOfDoors");
  const generateButton = document.getElementById("generateButton");

  const game = {
    wins: 0,
    losses: 0,
    playerChoice: null,
    winningDoor: null,
    doors: [],
    losingDoor: null,
    inMiddleOfGame: false,
  };

  generateButton.addEventListener("click", start);
  playArea.addEventListener("click", handleDoorClick);

  function start(e) {
    e.preventDefault();
    if (!game.inMiddleOfGame) {
      game.inMiddleOfGame = true;
      generateDoors();
      renderDoors();
    }
  }

  function generateDoors() {
    game.doors = [];
    for (let j = 0; j < Number(numOfDoorsInput.value); j++) {
      game.doors.push({
        id: j,
        isOpened: false,
        isPrize: false,
      });
    }

    game.winningDoor = Math.floor(Math.random() * game.doors.length);
    game.doors[game.winningDoor].isPrize = true;

    game.losingDoor = game.playerChoice; // Assume player's choice is losing door
    if (game.playerChoice === game.winningDoor) {
      while (game.losingDoor === game.winningDoor) {
        game.losingDoor = Math.floor(Math.random() * game.doors.length);
      }
      game.doors[game.losingDoor].isOpened = false;
    }

    game.doors.forEach((door) => {
      if (door.isOpened) {
        document.getElementById(`door${door.id}`).classList.add("openDoor");
      }
    });
  }

  function handleDoorClick(event) {
    const clickedElement = event.target;
    if (clickedElement.classList.contains("door") && !game.inMiddleOfGame) {
      game.playerChoice = parseInt(clickedElement.id.replace("door", ""), 10);
      clickedElement.classList.add("selectedDoor");
      setTimeout(() => {
        doorChangePrompt();
      }, 1000);
    }
  }

  // ... (Remaining functions)

})();

Online Definitions2

  • Dansdeals Gold Elite
  • ***
  • Join Date: Aug 2023
  • Posts: 144
  • Total likes: 126
  • DansDeals.com Hat Tips 0
    • View Profile
  • Location: Lakewood
Re: Programming for Beginners
« Reply #433 on: January 11, 2024, 02:10:44 AM »
Sorry to be that guy... but here is what ChatGpt had to say about it: (let us know if it was any good)
Nope that's fine with me. Any constructive feedback is good.

1. I tried to separate it as much as I could and keep functions to one specific task but was finding it hard to figure out what/how that should be.
2. Valid point. I can do that.
3. I only directly manipulated in the reveal doors function once. I forgot exactly why but I thought that was the easiest way.
4. Valid point.
5. I would've done that if the nodal was used more than once.
6. I thought I was consistent. Possibly missed some things

My main thing that I felt was lacking was they way I chained things together. I don't know exactly what's bothering me but I feel like it's not modular enough. But I don't know an alternative.

And towards the end (especially) too many if elses but I don't know a cleaner way
« Last Edit: January 11, 2024, 02:15:27 AM by Definitions2 »