40f52ddbff7b95e12ac8bbe777f7115c1faafd08

Fill the form below.

HTML

<p>Fill the form below.</p>
<form class="save-me" id="save-me" autocomplete="off">
  <label class="label" for="name">Name</label>
  <input data-type="input" class="input" type="text" name="name" id="name" autocomplete="off">
  <label class="label" for="address">Address</label>
  <input data-type="input" class="input" type="text" name="address" id="address">
  <label class="label" for="email">Email</label>
  <input data-type="input" class="input" type="email" name="email" id="email">
  <label for="hear-about-us">How did you hear about us?</label>
  <select data-type="input" class="select" name="hear-about-us" id="hear-about-us">
    <option value=""></option>
    <option value="google">Google</option>
    <option value="referral">Referred by a Friend</option>
    <option value="tv">A TV Ad</option>
    <option value="radio">A Radio Ad</option>
  </select>
  <br><br>
  <label class="label" for="more">Additional thoughts?</label>
  <textarea data-type="input" class="textarea" name="more" id="more"></textarea>
  <p><strong>Do you agree to our terms of service?</strong></p>
<label class="label" for="tos">
  <input data-type="input" type="radio" name="tos" value="yes">
  Yes
  <input data-type="input" type="radio" name="tos" value="no">
  No
</label>
<p><strong>Pick your favorite super heros.</strong></p>
<label>
  <input data-type="input" type="checkbox" name="spiderman">
  Spiderman
</label>
<label>
  <input data-type="input" type="checkbox" name="wonderwoman">
  Wonder Woman
</label>
<label>
  <input data-type="input" type="checkbox" name="blackpanther">
  Black Panther
</label>
  <p>
    <button class="button" type="submit">Submit</button>
  </p>
</form>

<<<<<<< HEAD <<<<<<< HEAD

JavaScript

/* For this project, get an array of stories from the New York Times API,
turn them into markup, and inject them into the #app element. */

const appOutput = document.querySelector('#app');
const getStories = function () {
fetch('https://api.nytimes.com/svc/topstories/v2/science.json?api-key=T6l8P8ICK6XZr1u3OeA0qoGUFrEcSM5R').then(
  function (response, resolve) {
    if (response.ok) {
      return response.json()
    } else {
      return Promise.reject(response)
    };
  }).then(function (data) {
  const allStories = [...data.results];
  const lastFiveStories = allStories.slice(0, 5)
  appOutput.innerHTML = lastFiveStories.map(function (result) {
    return (`
    <div class="container"> 
      <ul class="title">
      <li>${result.title}</li>
      <a class="link" href="${result.url}" target="_blank">Read more</a>
      </ul>
    </div>
    <br>
    `);
  }).join('')
}).catch(response => {
  console.log("something went wrong", response);
  appOutput.textContent = "Something went wrong...";
});
};

getStories();

=======

JavaScript

/* Before rendering API data into the DOM as markup, 
sanitize it to protect yourself from any malicious code that might get sent back. */

const appOutput = document.querySelector('#app');
const apiKey = 'T6l8P8ICK6XZr1u3OeA0qoGUFrEcSM5R';
const sections = ['Technology', 'Science', 'Magazine'];
const articleNum = 3;

const render = function (articles, section) {
  appOutput.innerHTML += '<h3 class="category">' + section + ':' + '</h3>' + articles.map(function (article) {
    return (`
            <div class="container">
              <ul class="title">
              <li>${sanitizeHTML(article.url)}</li>
              <a class="link" href="${sanitizeHTML(article.url)}" target="_blank">Read more</a>
              </ul>
            </div>
            <br>
            `);
  }).join('')
};

const getLastNStories = function (articles) {
  return articles.slice(0, articleNum)
}

const getStories = function (section) {
  fetch(`https://api.nytimes.com/svc/topstories/v2/${section}.json?api-key=${apiKey}`).then(
    function (response, resolve) {
      if (response.ok) {
        return response.json();
      } else {
        return Promise.reject(response);
      };
    }).then(function (data) {
    const lastNStories = getLastNStories(data.results);
    render(lastNStories, section);
  }).catch(response => {
    console.log("something went wrong", response);
    appOutput.textContent = "Something went wrong...";
  });
};

sections.forEach(function (section) {
  getStories(section);
});

>>>>>>> refs/remotes/origin/main =======

JavaScript

/* In today’s project, we’re going to modify our form saver script
to handle field types beyond text inputs. */

const form = document.querySelector('#save-me');
function saveInputValue(e) {
  let savedInputs = localStorage.getItem('autosave-form-inputs');
  savedInputs = savedInputs ? JSON.parse(savedInputs) : {};
  if (e.target.type === "checkbox") {
    savedInputs[e.target.name] = e.target.checked ? "on" : "off";
  } else {
    savedInputs[e.target.name] = e.target.value;
  }
  localStorage.setItem('autosave-form-inputs', JSON.stringify(savedInputs));
}
function getInputsFromLocalStorage() {
  let inputs = Array.prototype.slice.call(document.querySelectorAll('[data-type="input"]'));
  let savedInputs = localStorage.getItem('autosave-form-inputs');
  savedInputs = savedInputs ? JSON.parse(savedInputs) : {};
  inputs.forEach(function (input) {
    if (!savedInputs[input.name]) return;
    if (input.type === "checkbox") {
      input.checked = savedInputs[input.name] === "on" ? true : false;
    } else if (input.type === "radio") {
      input.checked = savedInputs[input.name] === input.value ? true : false;
    } else {
      input.value = savedInputs[input.name];
    }
  })
}
function clearDataOnSubmit() {
  localStorage.clear();
}
form.addEventListener('input', saveInputValue);
form.addEventListener('submit', clearDataOnSubmit);
getInputsFromLocalStorage();

>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08