console.clear(); // Containers const wrapper = document.getElementById('wrapper'); const header = document.getElementById('header'); const drawer = document.getElementById('drawer'); const swipeZone = document.getElementById('swipeZone'); // Create Element const createNode = element => { return document.createElement(element) } // Append Element const append = (parent, el) => { return parent.appendChild(el); } // Toggle Drawer const closeDrawer = () => { document.querySelector('.c-overlay').style.opacity = 0; drawer.classList.remove('c-drawer--open'); setTimeout(() => { document.querySelector('.c-overlay').remove(); }, 50) } const openDrawer = () => { let newOverlay = createNode('div'); newOverlay.classList = 'c-overlay'; newOverlay.style.opacity = 0; newOverlay.addEventListener('click', closeDrawer); append(document.body, newOverlay); setTimeout(() => { newOverlay.style.opacity = 1; drawer.classList.add('c-drawer--open'); }, 100) } const toggleDrawer = () => { drawer.classList.contains('c-drawer--open') ? closeDrawer() : openDrawer(); } // Render Empty State const emptyState = () => { const newText = createNode('div'); newText.classList = 'c-empty-state'; newText.innerHTML = ` `; append(wrapper, newText); setTimeout(() => { newText.remove(); }, 500) } // Render Driver Standings const renderList = (year) => { const url = `https://ergast.com/api/f1/${year}/driverStandings.json`; emptyState(); fetch(url) .then(response => { return response.json() }) .then(data => { const tableClass = 'c-table'; let table = createNode('table'); table.classList = tableClass; const tableContainer = document.querySelector(tableClass); table.innerHTML = ` Place Driver Wins Points `; const title = createNode('div'); title.classList = 'c-headline'; title.innerHTML = `

FORMULA 1
Driver Standings (${year == 'current' ? new Date().getFullYear() : year})

Season ${year == 'current' ? 'in Progress' : 'Completed'}`; append(wrapper, title); append(wrapper, table); data.MRData.StandingsTable.StandingsLists[0].DriverStandings.forEach(item => { const tableBody = table.querySelector('tbody'); let tr = createNode('tr'); tr.classList = "c-table__row"; tr.innerHTML = ` ${item.position} ${item.Driver.givenName} ${item.Driver.familyName}
${item.Constructors[0].name} ${item.wins} ${item.points} `; if(item.position == 1) { tr.querySelector('.c-place').classList.add('c-place--first'); if(year != 'current') { const firstPlaceCard = createNode('div'); firstPlaceCard.classList = 'c-winner'; firstPlaceCard.innerHTML = ` `; table.parentNode.insertBefore(firstPlaceCard, table) console.log('sup'); } } else if(item.position == 2) { tr.querySelector('.c-place').classList.add('c-place--second'); } else if(item.position == 3) { tr.querySelector('.c-place').classList.add('c-place--third'); } append(tableBody, tr); }) }) .catch(err => { console.log(err) }) } // Theme toggle document.getElementById('test').addEventListener('click', () => { document.documentElement.classList.toggle('theme--dark') document.getElementById('test').classList.toggle('c-toggle--active') }) // Create season select const createSeasonSelect = () => { const newSelect = createNode('div'); newSelect.innerHTML = ` Season: `; newSelect.classList = 'c-field'; newSelect.style.position = 'relative'; newSelect.style.zIndex = 300; let currentYear = new Date().getFullYear(); for(let i = 0; i < 20; i++) { let itemYear = currentYear - i; let newOption = createNode('option'); if(i == 0) { newOption.setAttribute('selected', true); newOption.innerHTML = `${itemYear} (current)`; newOption.setAttribute('value', 'current'); } else { newOption.innerHTML = itemYear; newOption.setAttribute('value', itemYear); } append(newSelect.querySelector('.c-field__input'), newOption); } newSelect.querySelector('.c-field__input').addEventListener('change', (e) => { document.getElementById('wrapper').innerHTML = ''; renderList(e.target.value); toggleDrawer(); }) append(drawer, newSelect); } createSeasonSelect(); renderList('current'); drawer.querySelector('.c-drawer__handle').addEventListener('click', toggleDrawer); // Swipe Drawer // credit: http://www.javascriptkit.com/javatutors/touchevents2.shtml, https://codepen.io/ganmahmud/pen/RaoKZa function swipedetect(el, callback){ var touchsurface = el, swipedir, startX, startY, distX, distY, threshold = 150, //required min distance traveled to be considered swipe restraint = 100, // maximum distance allowed at the same time in perpendicular direction allowedTime = 300, // maximum time allowed to travel that distance elapsedTime, startTime, handleswipe = callback || function(swipedir){} touchsurface.addEventListener('touchstart', function(e){ var touchobj = e.changedTouches[0] swipedir = 'none' dist = 0 startX = touchobj.pageX startY = touchobj.pageY startTime = new Date().getTime() // record time when finger first makes contact with surface e.preventDefault() }, false) touchsurface.addEventListener('touchmove', function(e){ e.preventDefault() // prevent scrolling when inside DIV }, false) touchsurface.addEventListener('touchend', function(e){ var touchobj = e.changedTouches[0] distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface elapsedTime = new Date().getTime() - startTime // get time elapsed if (elapsedTime <= allowedTime){ // first condition for awipe met if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met swipedir = (distX < 0)? 'left' : 'right' // if dist traveled is negative, it indicates left swipe } else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met swipedir = (distY < 0)? 'up' : 'down' // if dist traveled is negative, it indicates up swipe } } handleswipe(swipedir) e.preventDefault() }, false) } swipedetect(swipeZone, function(direction){ // direction contains either "none", "left", "right", "top", or "down" if(direction == 'up') { openDrawer(); } else if(direction == 'down') { closeDrawer(); } }); .entry-content tr td, body.et-pb-preview #main-content .container tr td { border-top: 1px solid #eee; padding: 0 0.8rem !important; } .entry-content thead th, .entry-content tr th, body.et-pb-preview #main-content .container thead th, body.et-pb-preview #main-content .container tr th { color: #555; font-weight: 700; padding: 4px 0px; } @import url("https://fonts.googleapis.com/css?family=DM+Sans:400,700&display=swap"); html { --black: 0; --white: 255; --theme: var(--black); --theme-invert: var(--white); --base-full: rgba(var(--theme),var(--theme),var(--theme),1); --base-80: rgba(var(--theme),var(--theme),var(--theme),0.8); --base-60: rgba(var(--theme),var(--theme),var(--theme),0.6); --base-40: rgba(var(--theme),var(--theme),var(--theme),0.4); --base-20: rgba(var(--theme),var(--theme),var(--theme),0.2); --base-10: rgba(var(--theme),var(--theme),var(--theme),0.1); --base-5: rgba(var(--theme),var(--theme),var(--theme),0.05); --invert-full: rgba(var(--theme-invert),var(--theme-invert),var(--theme-invert),1); --invert-80: rgba(var(--theme-invert),var(--theme-invert),var(--theme-invert),0.8); --invert-60: rgba(var(--theme-invert),var(--theme-invert),var(--theme-invert),0.6); --invert-40: rgba(var(--theme-invert),var(--theme-invert),var(--theme-invert),0.4); --invert-20: rgba(var(--theme-invert),var(--theme-invert),var(--theme-invert),0.2); --invert-10: rgba(var(--theme-invert),var(--theme-invert),var(--theme-invert),0.1); --invert-5: rgba(var(--theme-invert),var(--theme-invert),var(--theme-invert),0.05); --red: #EE3F46; --blue: #00A0F5; --green: #27B768; --first: #F5CD75; --second: silver; --third: #C6906B; } html.theme--dark { --theme: var(--white); --theme-invert: var(--black); } html { box-sizing: border-box; font-size: 62.5%; } *, *:before, *:after { box-sizing: inherit; } html, body { width: 100%; height: 100%; } body { font-size: 1.6rem; font-family: "DM Sans", system-ui; background: var(--invert-full); color: white; transition: all 100ms ease-out 0s; } input, select, button, textarea { font-family: inherit; color: inherit; background: transparent; } input:focus, input:active, select:focus, select:active, button:focus, button:active, textarea:focus, textarea:active { outline: 0; } h1 { font-size: 4.9rem; } h2 { font-size: 3.9rem; } h3 { font-size: 3.1rem; } h4 { font-size: 2.5rem; } h5 { font-size: 2.1rem; } h6 { font-size: 1.6rem; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 1.6rem; } small { font-size: 1.3rem; } p { line-height: 1.5; } .l-wrapper { width: 100%; max-width: 500px; margin: auto; padding: 3.2rem 0.8rem; } .l-header { width: 100%; max-width: 500px; margin: auto; padding: 2.4rem 0.8rem 1.6rem; position: relative; } .l-footer { text-align: center; padding-top: 1.6rem; } .c-swipe-zone { position: fixed; bottom: 0; height: 100%; left: 0; right: 0; transform: translateY(-100px); background: transparent; } .c-overlay { position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: var(--base-40); z-index: 50; cursor: pointer; transition: all 200ms ease-out 0s; } .c-drawer { display:none; } .c-table { width: 100%; border-spacing: 0; } .c-table__row { transition: all 200ms ease-out 0s; } .c-table__row:nth-of-type(even) .c-table__cell { background: var(--base-5); } .c-table__head-cell { text-align: left; padding: 0.8rem; font-size: 1.3rem; border-bottom: 1px solid var(--base-40); color: var(--base-60); } .c-table__cell { padding: 0.8rem; } .c-place { display: inline-flex; border-radius: 50%; width: 3.2rem; height: 3.2rem; background: var(--base-20); color: var(--invert-full); align-items: center; justify-content: center; font-size: 1.4rem; position: relative; border: 2px solid silver; } .c-place:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.15; border-radius: 50%; } .c-place--first { border-color: var(--first); color: var(--first); background: transparent; } .c-place--first:before { background: var(--first); } .c-place--second { border-color: silver; color: silver; background: transparent; } .c-place--second:before { background: var(--second); } .c-place--third { border-color: var(--third); color: var(--third); background: transparent; } .c-place--third:before { background: var(--third); } .c-winner { padding: 1.6rem; margin-bottom: 3.2rem; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--first); border-radius: 0.8rem; position: relative; } .c-winner:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.08; background: var(--first); } .c-winner__image { width: 4.8rem; height: 4.8rem; color: var(--first); } .c-winner__content { width: 100%; padding-left: 1.6rem; } .c-winner__badge { text-transform: uppercase; color: var(--first); font-weight: 700; letter-spacing: 0.05em; } .c-winner__info { display: flex; } .c-winner__title { margin-top: 0.8rem; margin-bottom: 0.8rem; } .c-winner__info-item:not(:last-of-type) { margin-right: 1.6rem; } .c-toggle { height: 2.4rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; width: 80px; position: relative; border: 1px solid var(--invert-20); border-radius: 0.4rem; margin-bottom: 1.6rem; padding: 0 0.4rem; flex-direction: row; transition: all 100ms ease-out 0s; } .c-toggle:before { content: "LIGHT"; font-size: 1.2rem; position: absolute; top: 50%; right: 0.4rem; transform: translateY(-50%); color: var(--invert-60); opacity: 0; -webkit-animation: fadeIn 200ms ease-out forwards; animation: fadeIn 200ms ease-out forwards; } .c-toggle--active { flex-direction: row-reverse; -webkit-animation: fadeIn 200ms ease-out forwards; animation: fadeIn 200ms ease-out forwards; } .c-toggle--active:before { content: "DARK"; right: auto; left: 0.4rem; } .c-toggle__handle { height: 1.6rem; width: 2.4rem; background: var(--invert-40); display: inline-block; border-radius: 0.2666666667rem; } .c-field__input { display: block; width: 100%; margin-top: 0.4rem; padding: 1.6rem; height: 5.6rem; } .c-field__label { font-size: 1.3rem; } .c-empty-state { text-align: center; width: 100%; padding: 4rem 1.6rem; background: var(--base-5); color: var(--base-40); transition: all 200ms ease-out 0s; } .c-empty-state__icon { -webkit-animation: loader 2s infinite linear; animation: loader 2s infinite linear; } .c-headline { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.6rem; } @media screen and (max-width: 768px) { .c-headline { flex-direction: column; text-align: center; } } .c-headline__title { margin-bottom: 0; color: white; } @media screen and (max-width: 768px) { .c-headline__title { margin-bottom: 1.6rem; } } .c-chip { font-size: 1.2rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--base-20); display: inline-block; font-weight: 400; color: white; border: 1px solid var(--base-20); position: relative; } .c-chip:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--base-20); opacity: 0.12; border-radius: 999px; } .c-chip--primary { color: var(--base-full); border-color: var(--base-full); background: transparent; } .c-chip--primary:after { background: var(--base-full); } .c-chip--danger { color: var(--red); border-color: var(--red); background: transparent; } .c-chip--danger:after { background: var(--red); } .c-chip--success { color: var(--green); border-color: var(--green); background: transparent; } .c-chip--success:after { background: var(--green); } .c-chip--info { color: var(--blue); border-color: var(--blue); background: transparent; } .c-chip--info:after { background: var(--blue); } .c-chip--secondary { color: var(--base-60); border-color: var(--base-60); background: transparent; } .c-chip--secondary:after { background: var(--base-60); } .c-chip--invert { color: var(--invert-full); border-color: var(--invert-full); background: transparent; } .c-chip--invert:after { background: var(--invert-full); } .u-text--left { text-align: left !important; } .u-text--right { text-align: right !important; } .u-text--center { text-align: center !important; } .u-text--primary { color: var(--base-full) !important; } .u-bg--primary { color: var(--base-full) !important; } .u-text--danger { color: var(--red) !important; } .u-bg--danger { color: var(--red) !important; } .u-text--success { color: var(--green) !important; } .u-bg--success { color: var(--green) !important; } .u-text--info { color: var(--blue) !important; } .u-bg--info { color: var(--blue) !important; } .u-text--secondary { color: var(--base-60) !important; } .u-bg--secondary { color: var(--base-60) !important; } .u-text--invert { color: var(--invert-full) !important; } .u-bg--invert { color: var(--invert-full) !important; } @-webkit-keyframes loader { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @keyframes loader { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes drawerClose { 0% { transform: translate(-50%, 24px); } 40% { transform: translate(-50%, 0px); } 100% { transform: translate(-50%, 276px); } } @keyframes drawerClose { 0% { transform: translate(-50%, 24px); } 40% { transform: translate(-50%, 0px); } 100% { transform: translate(-50%, 276px); } } @-webkit-keyframes drawerOpen { 0% { transform: translate(-50%, 276px); } 40% { transform: translate(-50%, 300px); } 100% { transform: translate(-50%, 24px); } } @keyframes drawerOpen { 0% { transform: translate(-50%, 276px); } 40% { transform: translate(-50%, 300px); } 100% { transform: translate(-50%, 24px); } }