dom&event

dom.js

/* eslint-disable no-multiple-empty-lines */
/* eslint-disable prefer-const */

// INSTRUCTIONS - PLEASE READ!!
// Here are some challenges. Solve them from top to bottom

// **Each time** you complete a challenge, please commit and push!
// This is a good practise. Each time you make some progress in software
// development, you want to save a snapshot.

module.exports = function runChallenges(check) {
  // Ex 1. Read what's written in the email input
  //       Make the function getEmail() return it
  const getEmail = () => {
    // TODO: return the email
    return document.querySelector("#email").value
  };

  // /!\ DO NOT CHANGE THIS LINE - TEST PURPOSES
  const borisesEmail = getEmail();

  // Ex 2. Change the content of the email input by writing your own email address
  document.querySelector("#email").value = "mr.marco@gmail.com"


  // Ex 3. Replace the email hint (next to the input) with 'This is my email now'
  //       The text should be emphasized using a <strong> tag
  document.querySelector("#email-hint").innerHTML = "<strong>This is my email now</strong>"

  // Ex 4. Add the .blue CSS class to the th elements
  document.querySelectorAll("th").forEach((th) => {
    th.classList.add("blue");
  })

  // Ex 5. Count the number of table body rows there are
  //       Make the function teamCount() return it
  const teamCount = () => {
    // TODO: return the number of teams
    return document.querySelectorAll("tbody tr").length
  };

  // /!\ DO NOT CHANGE THIS LINE - TEST PURPOSES
  const teamCountBeforeAddition = teamCount();

  // Ex 6. Say there is a 15th team added to the table.
  //       Add a row at the bottom, this new team should have zero points.
  const body = document.querySelector("tbody");
  const item = "<tr><td>15</td><td>Zibbo Club</td><td>0</td></tr>"
  body.insertAdjacentHTML('beforeend', item)
  // Ex 7. Write some code to sum all points given to all teams
  //       Make the function summarizePoints() return it
  const summarizePoints = () => {
    return Array.from(body.querySelectorAll("tbody tr")).map((row) => {
      return parseInt(row.lastChild.innerText, 10);
    }).reduce((x, y) => x + y);
  };
  // Ex 8. Change the background color of all table header cells to #DDF4FF
  document.querySelectorAll("th").forEach((th) => {
    th.style.background = "#DDF4FF" ;
  })
  // Ex 9. Remove the "Email:" label from the DOM
  document.querySelector("label").remove();





  // Checking exercise answers. DO NOT MODIFY THIS LINE
  check(borisesEmail, teamCountBeforeAddition, summarizePoints());
};

inbox.js

/* eslint-disable no-multiple-empty-lines */

// TODO: return true with a probability of 20%.
const hasNewMessage = () => Math.random() < 0.2;

const newMessage = () => {
  // TODO: return a random message as an object with two keys, subject and sender
  const names = ['Arnold Schwarzenegger', 'Mario Bros', 'Garibaldi'];
  const subjs = ['I\'m Back', 'Mariooooo', 'Egli fu'];
  const name = names[Math.floor(Math.random() * names.length)];
  const subj = subjs[Math.floor(Math.random() * subjs.length)];
  return {
    sender: name,
    subject: subj
  };
};

const appendMessageToDom = (message) => {
  // TODO: append the given message to the DOM (as a new row of `#inbox`)
  const emailHtml = `<div class='row message unread'><div class='col-xs-3'>${message.sender}</div><div class='col-xs-9'>${message.subject}</div></div>`;
  const inbox = document.querySelector("#inbox");
  inbox.insertAdjacentHTML("afterbegin", emailHtml);
};

const updateCounter = () => {
  const n = document.querySelectorAll("#inbox div.unread").length
  document.querySelector("#count").innerText = `(${n})`
}

const updateTitle = () => {
  const n = document.querySelectorAll("#inbox div.unread").length
  document.title = `Fake Inbox (${n})`
}

const refresh = () => {
  // TODO: Implement the global refresh logic. If there is a new message,
  //       append it to the DOM. Update the unread counter in title as well.
  if (hasNewMessage()) {
    appendMessageToDom(newMessage())
    updateCounter()
    updateTitle()
  }
};

















// Do not remove these lines:
document.addEventListener("DOMContentLoaded", () => {
  setInterval(refresh, 1000); // Every 1 second, the `refresh` function is called.
});

module.exports = { hasNewMessage, newMessage };

validation.js

// // TODO: Validate this form
// All fields are required
// Ensure the Terms of Service checkbox is ticked
// Ensure the user enters a valid French zipcode
// Validate the email format
// Validate the phone number. French mobile phones only
// If all fields have been completed correctly, enable the submit button

// <input type="text" class="form-control is-valid">
// <input type="text" class="form-control is-invalid">

const btn = document.querySelector("button")
const inputs = document.querySelectorAll("input, textarea")

inputs.forEach((input) => {
  input.addEventListener("blur", e => {
    // console.log(input.id);
    // console.log(input.value);

    if (input.id == "first_name" || input.id == "last_name" || input.id == "address" || input.id == "country" || input.id == "city") {
      if (input.value != "") {
        input.classList.remove("is-invalid")
        input.classList.add("is-valid")
      } else {
        input.classList.remove("is-valid")
        input.classList.add("is-invalid")
      }

    } else if (input.id == "email") {
      if (input.value.match(/.+@.+\.\w{2,3}/) != null) {
        input.classList.remove("is-invalid")
        input.classList.add("is-valid")
      } else {
        input.classList.remove("is-valid")
        input.classList.add("is-invalid")
      }

    } else if (input.id == "zip_code") {
      re = /^(?:(?:(?:0[1-9]|[1-8]\d|9[0-4])(?:\d{3})?)|97[1-8]|98[4-9]|‌​‌​2[abAB])$/
      if (input.value.match(re) != null) {
        input.classList.remove("is-invalid")
        input.classList.add("is-valid")
      } else {
        input.classList.remove("is-valid")
        input.classList.add("is-invalid")
      }

    } else if (input.id == "mobile_phone") {
      re = /^(33|0)(6|7|9)\d{8}$/
      if (input.value.match(re) != null) {
        input.classList.remove("is-invalid")
        input.classList.add("is-valid")
      } else {
        input.classList.remove("is-valid")
        input.classList.add("is-invalid")
      }

    } else if (input.id == "tos") {
      if (input.value == "on") {
        input.classList.remove("is-invalid")
        input.classList.add("is-valid")
      } else {
        input.classList.remove("is-valid")
        input.classList.add("is-invalid")
      }
    } // END of Inputs IF statement

    const validElements = document.querySelectorAll(".is-valid")
    console.log("inputs", inputs.length);
    console.log("valid",validElements.length);

    if (inputs.length == validElements.length) {
      btn.disabled = false
      btn.innerText = "Submit"
    }

  })// END of EventListener
})// END of forEach

wagon_race.js

document.addEventListener("keyup", e => {
  if (e.keyCode == 65) { // a
    const active = document.querySelector("#player1_race td.active")
    if (active.nextElementSibling == null) {
      alert("Player 1 WIN!");
      window.location.reload();
    } else {
      active.classList.toggle("active");
      active.nextElementSibling.classList.toggle("active");
    }
  } else if (e.keyCode == 76) { // l
    const active = document.querySelector("#player2_race td.active")
    if (active.nextElementSibling == null) {
      alert("Player 2 WIN!");
      window.location.reload();
    } else {
      active.classList.toggle("active");
      active.nextElementSibling.classList.toggle("active");
    }
  }
})