jsrath

  
updateExpiry = () => {
    let today = new Date();
    const options = { day: 'numeric', month: 'long', year: 'numeric' };

    today.setDate(today.getDate() + this.state.daysLeft);
    today = today.toLocaleDateString('en-GB', options);
    this.setState({ expiry: today });
  };

jsrath

const mainNav = document.querySelector('.main-nav');
const menu = document.querySelector('#menu');

toggleMenu = () => {
  mainNav.classList.toggle('isDisplayed');
  if (menu.getAttribute('src') === './images/menu.svg') {
    menu.setAttribute('src', './images/menu-purple.svg');
  } else {
    menu.setAttribute('src', './images/menu.svg');

jsrath

handleSave = async () => {
    if (!this.state.editing.id) {
      const newId = Math.max(...this.state.contacts.map(contact => contact.id)) + 1;
      let editing = { ...this.state.editing };
      editing.id = newId;
      await this.setState({ editing });
    }
    const idToUpdate = this.state.editing.id;
    const duplicate = [...this.state.contacts].filter(contact => contact.id !== idToUpdate);
    this.setState({ contacts: [...duplicate, this.state.editing] }, () => this.toggleModal());

jsrath

    
    if (timeRemaining >= 0) {
      hours = parseInt(timeRemaining / 3600);
      timeRemaining = timeRemaining % 3600;
      minutes = parseInt(timeRemaining / 60);
      timeRemaining = timeRemaining % 60;
      seconds = parseInt(timeRemaining);
      document.querySelector('#hours').innerHTML = ('0' + hours).slice(-2);
      document.querySelector('#minutes').innerHTML = ('0' + minutes).slice(-2);
      document.querySelector('#seconds').innerHTML = ('0' + seconds).slice(-2);

jsrath

@media screen and (max-width: 1100px) {
  .mobile-menu {
    display: flex;
  }
  header, .nav-container, .nav-container ul li, .gray-nav, .gray-nav ul {
    flex-direction: column;
    justify-content: center;

jsrath

function getCountryName(event) {
 event.preventDefault();
 const countryOutput = document.querySelector('#country-output');
 let code = document.querySelector('#country-text').value;
 countryOutput.innerHTML = '';
 fetch(`https://restcountries.eu/rest/v2/ callingcode/${code}`)
   .then(result => result.json())
   .then(result => {
      result.map(country => 
        (countryOutput.innerHTML += 

jsrath

 const tooltip = d3
    .select('body')
    .append('div')
    .attr('class', 'tooltip');

  const color = d3
    .scaleLinear()
    .domain([d3.min(vatValues), d3.mean(vatValues), d3.max(vatValues)])
    .range(['green', 'yellow', 'red']);

jsrath

async function getData(event) {
  event.target.value ? (country = event.target.value) : (country = countrySelect.selectedOptions[0].innerText);
  for (let i = year; i < 2018; i++) {
    let obj = {};
    await fetch(`http://api.population.io/ 1.0/population/${year}/${country}`)
      .then(result => result.json())
      .then(result => result.map(age => age.total).reduce((a, b) => a + b))
      .then(result => {
        obj['year'] = i;
        obj['population'] = result;

jsrath

  filterByBrand = event => {
    this.setState({ brand: event.target.value }, () => {
      const filtered = this.state.items.filter(item =>
        item.manufacturer.toLowerCase()
        .includes(this.state.brand.toLowerCase()),
      );
      this.setState({ filtered });
    });
  };
  

jsrath

dataArray.forEach(element => {
    d3.select(`.population-map #${element.county}`)
      .style('fill', color(element.total / (element.population / 10000)))
      .on('mouseover', () =>
        tooltip.style('display', 'block').html(
          `<p><strong>${element.county} County</strong></p>
          <p>${(element.total / (element.population / 10000)).toFixed(2)} Crime(s) </p>`,
        ))
      .on('mousemove', () => tooltip.style('top', `${d3.event.pageY + 10}px`)