mirror of https://github.com/01-edu/public.git
refactor(public): format DOM exercises for better user experience
This commit is contained in:
parent
b75b93b83d
commit
97d7414484
|
@ -25,7 +25,8 @@ You only need to create & submit the JS file `build-brick-and-break.js`, We're p
|
|||
|
||||
- the HTML file [build-brick-and-break.html](./build-brick-and-break.html) can be opened in the browser, which includes:
|
||||
- the JS script running some code, and which will enable you to run your code.
|
||||
- some CSS pre-styled classes: feel free to use those as they are, or modify them.
|
||||
|
||||
- the CSS file [build-brick-and-break.css](./build-brick-and-break.css) feel free to use those as they are, or modify them.
|
||||
|
||||
### Expected result
|
||||
|
||||
|
|
|
@ -0,0 +1,61 @@
|
|||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-end;
|
||||
height: 100vh;
|
||||
color: var(--text);
|
||||
padding: 10vh 36.5vw;
|
||||
}
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
width: 9vw;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 4.44vh;
|
||||
background: linear-gradient(-25deg, var(--clear) 30%, var(--disabled) 90%);
|
||||
}
|
||||
|
||||
#tools {
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
font-size: 80px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
[data-repaired='true'] {
|
||||
color: hsl(275, 100%, 50%);
|
||||
}
|
||||
|
||||
[data-repaired='true']:after {
|
||||
content: '-repaired';
|
||||
}
|
||||
|
||||
[data-repaired='in progress'] {
|
||||
color: black;
|
||||
}
|
||||
|
||||
[data-repaired='in progress']:after {
|
||||
content: '-in progress';
|
||||
}
|
|
@ -1,108 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Build brick and break</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-end;
|
||||
height: 100vh;
|
||||
color: var(--text);
|
||||
padding: 10vh 36.5vw;
|
||||
}
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
width: 9vw;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 4.44vh;
|
||||
background: linear-gradient(-25deg, var(--clear) 30%, var(--disabled) 90%);
|
||||
}
|
||||
|
||||
#tools {
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
font-size: 80px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
[data-repaired='true'] {
|
||||
color: hsl(275, 100%, 50%);
|
||||
}
|
||||
|
||||
[data-repaired='true']:after {
|
||||
content: '-repaired';
|
||||
}
|
||||
|
||||
[data-repaired='in progress'] {
|
||||
color: black;
|
||||
}
|
||||
|
||||
[data-repaired='in progress']:after {
|
||||
content: '-in progress';
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="./build-brick-and-break.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="module">
|
||||
import { build, repair, destroy } from './build-brick-and-break.js'
|
||||
import { build, repair, destroy } from './build-brick-and-break.js'
|
||||
|
||||
build(54)
|
||||
build(54)
|
||||
|
||||
const body = document.querySelector('body')
|
||||
const body = document.querySelector('body')
|
||||
|
||||
const tools = document.createElement('section')
|
||||
tools.id = 'tools'
|
||||
body.append(tools)
|
||||
const tools = document.createElement('section')
|
||||
tools.id = 'tools'
|
||||
body.append(tools)
|
||||
|
||||
const dynamite = document.createElement('span')
|
||||
dynamite.id = 'dynamite'
|
||||
dynamite.textContent = '🧨'
|
||||
dynamite.addEventListener('click', destroy)
|
||||
const dynamite = document.createElement('span')
|
||||
dynamite.id = 'dynamite'
|
||||
dynamite.textContent = '🧨'
|
||||
dynamite.addEventListener('click', destroy)
|
||||
|
||||
const hammer = document.createElement('span')
|
||||
hammer.id = 'hammer'
|
||||
hammer.textContent = '🔨'
|
||||
hammer.addEventListener('click', () => repair(...reparations))
|
||||
const hammer = document.createElement('span')
|
||||
hammer.id = 'hammer'
|
||||
hammer.textContent = '🔨'
|
||||
hammer.addEventListener('click', () => repair(...reparations))
|
||||
|
||||
tools.append(dynamite, hammer)
|
||||
tools.append(dynamite, hammer)
|
||||
|
||||
const random = (min, max) => {
|
||||
min = Math.ceil(min)
|
||||
max = Math.floor(max)
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min
|
||||
}
|
||||
const random = (min, max) => {
|
||||
min = Math.ceil(min)
|
||||
max = Math.floor(max)
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min
|
||||
}
|
||||
|
||||
const randomBricks = [...Array(15).keys()].map((e) => `brick-${random(1, 54)}`)
|
||||
const reparations = [...new Set(['brick-26', ...randomBricks])]
|
||||
const randomBricks = [...Array(15).keys()].map((e) => `brick-${random(1, 54)}`)
|
||||
const reparations = [...new Set(['brick-26', ...randomBricks])]
|
||||
|
||||
body.dataset.reparations = reparations
|
||||
body.dataset.reparations = reparations
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -29,10 +29,11 @@ You only need to create & submit the JS file `fifty-shades-of-cold.js`, we're pr
|
|||
- the HTML file [fifty-shades-of-cold.html](./fifty-shades-of-cold.html) to open in the browser, which includes:
|
||||
|
||||
- the JS script running some code, and which will enable you to run yours
|
||||
- some CSS pre-styled classes: feel free to use those as they are, or modify them.
|
||||
|
||||
- the data file [fifty-shades-of-cold.data.js](./fifty-shades-of-cold.data.js) from which you can import `colors`.
|
||||
|
||||
- the CSS file [fifty-shades-of-cold.css](./fifty-shades-of-cold.css) feel free to use those as they are, or modify them.
|
||||
|
||||
### Expected result
|
||||
|
||||
You can see an example of the expected result [here](https://youtu.be/a-3JDEvW-Qg)
|
||||
|
|
|
@ -0,0 +1,35 @@
|
|||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
padding: 5rem;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 20px;
|
||||
padding: 5px 8px;
|
||||
}
|
|
@ -1,61 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Fifty shades of cold</title>
|
||||
<title>Fifty shades of cold</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
|
||||
<style>
|
||||
<link rel="stylesheet" type="text/css" href="./fifty-shades-of-cold.css">
|
||||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
padding: 5rem;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 20px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="module">
|
||||
|
||||
import { generateClasses, generateColdShades, choseShade } from './fifty-shades-of-cold.js'
|
||||
import { generateClasses, generateColdShades, choseShade } from './fifty-shades-of-cold.js'
|
||||
|
||||
generateClasses()
|
||||
generateColdShades()
|
||||
generateClasses()
|
||||
generateColdShades()
|
||||
|
||||
const divs = [...document.querySelectorAll('div')]
|
||||
divs.map((d) => {
|
||||
d.addEventListener('click', () => choseShade(d.textContent))
|
||||
})
|
||||
const divs = [...document.querySelectorAll('div')]
|
||||
divs.map((d) => {
|
||||
d.addEventListener('click', () => choseShade(d.textContent))
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -51,3 +51,5 @@ You only need to create & submit the JS file `get-them-all.js` ; we're providing
|
|||
- the import of the data
|
||||
|
||||
- the data file [get-them-all.data.js](./get-them-all.data.js) used to generate content in the HTML
|
||||
|
||||
- the CSS file [get-them-all.css](./get-them-all.css) used to style the content in the HTML
|
||||
|
|
|
@ -0,0 +1,87 @@
|
|||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 100px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#buttons {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 150px;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 50px black;
|
||||
}
|
||||
|
||||
#buttons * {
|
||||
margin: 0 20px;
|
||||
padding: 10px 20px;
|
||||
background: var(--clear);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
a,
|
||||
span {
|
||||
min-width: 110px;
|
||||
min-height: 110px;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
border: solid 1px var(--clear);
|
||||
line-height: 22px;
|
||||
padding: 10px;
|
||||
color: var(--clear);
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.found {
|
||||
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.6),
|
||||
-10px -10px 15px rgba(255, 255, 255, 0.074);
|
||||
border: none;
|
||||
background: var(--purple);
|
||||
color: var(--background);
|
||||
}
|
|
@ -1,179 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Get them all</title>
|
||||
<title>Get them all</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
|
||||
<style>
|
||||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 100px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#buttons {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 150px;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 50px black;
|
||||
}
|
||||
|
||||
#buttons * {
|
||||
margin: 0 20px;
|
||||
padding: 10px 20px;
|
||||
background: var(--clear);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
a,
|
||||
span {
|
||||
min-width: 110px;
|
||||
min-height: 110px;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
border: solid 1px var(--clear);
|
||||
line-height: 22px;
|
||||
padding: 10px;
|
||||
color: var(--clear);
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.found {
|
||||
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.6),
|
||||
-10px -10px 15px rgba(255, 255, 255, 0.074);
|
||||
border: none;
|
||||
background: var(--purple);
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="./get-them-all.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="module">
|
||||
|
||||
import { people } from './get-them-all.data.js'
|
||||
import {
|
||||
getBonannoPisano,
|
||||
getActive,
|
||||
getArchitects,
|
||||
getClassical,
|
||||
} from './get-them-all.js'
|
||||
import { people } from './get-them-all.data.js'
|
||||
import {
|
||||
getBonannoPisano,
|
||||
getActive,
|
||||
getArchitects,
|
||||
getClassical,
|
||||
} from './get-them-all.js'
|
||||
|
||||
const body = document.querySelector('body')
|
||||
const body = document.querySelector('body')
|
||||
|
||||
const shuffle = (array) => {
|
||||
const test = array.length - 1
|
||||
for (let i = test; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * i)
|
||||
const temp = array[i]
|
||||
array[i] = array[j]
|
||||
array[j] = temp
|
||||
}
|
||||
return array
|
||||
}
|
||||
|
||||
shuffle(people).map(({ id, classe, address, plans, tag, active }) => {
|
||||
const people = document.createElement(tag)
|
||||
people.id = id
|
||||
people.textContent = 'Someone'
|
||||
people.className = `${classe} ${active ? 'active' : ''}`
|
||||
body.append(people)
|
||||
})
|
||||
|
||||
const buttonsContainer = document.createElement('div')
|
||||
buttonsContainer.id = 'buttons'
|
||||
body.append(buttonsContainer)
|
||||
|
||||
const buttons = [
|
||||
{ name: 'Architect', action: getArchitects },
|
||||
{ name: 'Classical', action: getClassical },
|
||||
{ name: 'Active', action: getActive },
|
||||
{ name: 'Bonanno', action: getBonannoPisano },
|
||||
]
|
||||
|
||||
buttons.forEach(({ name, action }, i) => {
|
||||
const btn = document.createElement('button')
|
||||
btn.id = `btn${name}`
|
||||
btn.textContent = `Get ${name}${i === 0 ? 's' : ''}`
|
||||
|
||||
if (i > 0) {
|
||||
btn.className = 'disabled'
|
||||
}
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
const [targetted, others] = action()
|
||||
|
||||
if (name === 'Bonanno') {
|
||||
targetted.textContent = targetted.id.replace('P', ' P')
|
||||
targetted.classList.add('found')
|
||||
} else {
|
||||
targetted.forEach((t) => {
|
||||
t.textContent = name
|
||||
})
|
||||
const shuffle = (array) => {
|
||||
const test = array.length - 1
|
||||
for (let i = test; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * i)
|
||||
const temp = array[i]
|
||||
array[i] = array[j]
|
||||
array[j] = temp
|
||||
}
|
||||
return array
|
||||
}
|
||||
|
||||
others.forEach((o) => {
|
||||
o.style.opacity = 0.2
|
||||
shuffle(people).map(({ id, classe, address, plans, tag, active }) => {
|
||||
const people = document.createElement(tag)
|
||||
people.id = id
|
||||
people.textContent = 'Someone'
|
||||
people.className = `${classe} ${active ? 'active' : ''}`
|
||||
body.append(people)
|
||||
})
|
||||
|
||||
btn.className = 'disabled'
|
||||
const buttonsContainer = document.createElement('div')
|
||||
buttonsContainer.id = 'buttons'
|
||||
body.append(buttonsContainer)
|
||||
|
||||
const last = i + 1 === buttons.length
|
||||
if (last) return
|
||||
const next = document.getElementById(`btn${buttons[i + 1].name}`)
|
||||
next.classList.remove('disabled')
|
||||
})
|
||||
const buttons = [
|
||||
{ name: 'Architect', action: getArchitects },
|
||||
{ name: 'Classical', action: getClassical },
|
||||
{ name: 'Active', action: getActive },
|
||||
{ name: 'Bonanno', action: getBonannoPisano },
|
||||
]
|
||||
|
||||
buttonsContainer.append(btn)
|
||||
})
|
||||
buttons.forEach(({ name, action }, i) => {
|
||||
const btn = document.createElement('button')
|
||||
btn.id = `btn${name}`
|
||||
btn.textContent = `Get ${name}${i === 0 ? 's' : ''}`
|
||||
|
||||
if (i > 0) {
|
||||
btn.className = 'disabled'
|
||||
}
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
const [targetted, others] = action()
|
||||
|
||||
if (name === 'Bonanno') {
|
||||
targetted.textContent = targetted.id.replace('P', ' P')
|
||||
targetted.classList.add('found')
|
||||
} else {
|
||||
targetted.forEach((t) => {
|
||||
t.textContent = name
|
||||
})
|
||||
}
|
||||
|
||||
others.forEach((o) => {
|
||||
o.style.opacity = 0.2
|
||||
})
|
||||
|
||||
btn.className = 'disabled'
|
||||
|
||||
const last = i + 1 === buttons.length
|
||||
if (last) return
|
||||
const next = document.getElementById(`btn${buttons[i + 1].name}`)
|
||||
next.classList.remove('disabled')
|
||||
})
|
||||
|
||||
buttonsContainer.append(btn)
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -22,10 +22,11 @@ You only need to create & submit the JS file `gossip-grid.js`; we're providing y
|
|||
- the HTML file [gossip-grid.html](./gossip-grid.html) to open in the browser, which includes:
|
||||
|
||||
- the JS script which will enable you to run your code.
|
||||
- some CSS pre-styled classes: feel free to use those as they are, or modify them.
|
||||
|
||||
- the data file [gossip-grid.data.js](./gossip-grid.data.js) from which you can import `gossips`.
|
||||
|
||||
- the CSS file [gossip-grid.css](./gossip-grid.css) feel free to use those as they are, or modify them.
|
||||
|
||||
### Expected result
|
||||
|
||||
You can see an example of the expected result [here](https://youtu.be/nbR2eHBqTxU)
|
||||
|
|
|
@ -0,0 +1,115 @@
|
|||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: 10rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.gossip {
|
||||
background: hsl(280, 50%, 50%);
|
||||
margin: 20px;
|
||||
width: 250px;
|
||||
padding: 20px 25px;
|
||||
line-height: 30px;
|
||||
font-size: 20px;
|
||||
word-break: break-word;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gossip:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ranges {
|
||||
position: fixed;
|
||||
top: 5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.range {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--clear);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.range label,
|
||||
.range span {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.range label {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 20px 25px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
textarea::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
border: solid 1px white;
|
||||
align-self: flex-end;
|
||||
padding: 5px 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fade-in 0.75s;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
}
|
||||
to {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
|
@ -1,135 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Gossip grid</title>
|
||||
<title>Gossip grid</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
|
||||
<style>
|
||||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: 10rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.gossip {
|
||||
background: hsl(280, 50%, 50%);
|
||||
margin: 20px;
|
||||
width: 250px;
|
||||
padding: 20px 25px;
|
||||
line-height: 30px;
|
||||
font-size: 20px;
|
||||
word-break: break-word;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gossip:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ranges {
|
||||
position: fixed;
|
||||
top: 5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.range {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--clear);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.range label,
|
||||
.range span {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.range label {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 20px 25px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
textarea::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
border: solid 1px white;
|
||||
align-self: flex-end;
|
||||
padding: 5px 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fade-in 0.75s;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
}
|
||||
to {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="./gossip-grid.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="module">
|
||||
|
||||
import { grid } from './gossip-grid.js'
|
||||
import { grid } from './gossip-grid.js'
|
||||
|
||||
grid()
|
||||
grid()
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -17,7 +17,8 @@ You only need to create & submit the JS file `harder-bigger-bolder-stronger.js`.
|
|||
- the HTML file [harder-bigger-bolder-stronger.html](./harder-bigger-bolder-stronger.html) to open in the browser, which includes:
|
||||
|
||||
- the JS script running some code, and which will enable you to run yours.
|
||||
- some CSS pre-styled classes: feel free to use those as they are, or modify them.
|
||||
|
||||
- the CSS file [harder-bigger-bolder-stronger.css](./harder-bigger-bolder-stronger.css) feel free to use those as they are, or modify them.
|
||||
|
||||
### Notions
|
||||
|
||||
|
|
|
@ -0,0 +1,37 @@
|
|||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
padding: 5rem;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 5px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
color: white;
|
||||
}
|
|
@ -1,57 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Harder, bigger, bolder, stronger</title>
|
||||
<title>Harder, bigger, bolder, stronger</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
|
||||
<style>
|
||||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
padding: 5rem;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 5px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="./build-brick-and-break.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="module">
|
||||
|
||||
import { generateLetters } from './harder-bigger-bolder-stronger.js'
|
||||
import { generateLetters } from './harder-bigger-bolder-stronger.js'
|
||||
|
||||
generateLetters()
|
||||
generateLetters()
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -17,7 +17,8 @@ You only need to create & submit the JS file `keycodes-symphony.js`; we're provi
|
|||
- the HTML file [keycodes-symphony.html](./keycodes-symphony.html) to open in the browser, which includes:
|
||||
|
||||
- the JS script which will allow to run your code.
|
||||
- some CSS pre-styled classes: feel free to use those as they are, or modify them.
|
||||
|
||||
- the CSS file [keycodes-symphony.css](./keycodes-symphony.css) feel free to use those as they are, or modify them.
|
||||
|
||||
### Expected result
|
||||
|
||||
|
|
|
@ -0,0 +1,37 @@
|
|||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.note {
|
||||
width: 100%;
|
||||
flex: 1 1 80px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
|
@ -1,57 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Keycodes symphony</title>
|
||||
<title>Keycodes symphony</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
|
||||
<style>
|
||||
<link rel="stylesheet" type="text/css" href="./keycodes-symphony.css">
|
||||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.note {
|
||||
width: 100%;
|
||||
flex: 1 1 80px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="module">
|
||||
|
||||
import { compose } from './keycodes-symphony.js'
|
||||
import { compose } from './keycodes-symphony.js'
|
||||
|
||||
compose()
|
||||
compose()
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -22,7 +22,8 @@ You only need to create & submit the JS file `mouse-trap.js`; we're providing yo
|
|||
- the HTML file [mouse-trap.html](./mouse-trap.html) to open in the browser, which includes:
|
||||
|
||||
- the JS script which will enable you to run your code.
|
||||
- some CSS pre-styled classes: feel free to use those as they are, or modify them.
|
||||
|
||||
- the CSS file [mouse-trap.css](./mouse-trap.css) feel free to use those as they are, or modify them.
|
||||
|
||||
### Expected result
|
||||
|
||||
|
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: 5rem;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 25vw;
|
||||
height: 25vh;
|
||||
border: solid 1px var(--clear);
|
||||
}
|
|
@ -1,63 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Mouse trap</title>
|
||||
<title>Mouse trap</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
|
||||
<style>
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: 5rem;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 25vw;
|
||||
height: 25vh;
|
||||
border: solid 1px var(--clear);
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="./mouse-trap.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="module">
|
||||
|
||||
import { setBox, createCircle, moveCircle } from './mouse-trap.js'
|
||||
import { setBox, createCircle, moveCircle } from './mouse-trap.js'
|
||||
|
||||
setBox()
|
||||
createCircle()
|
||||
moveCircle()
|
||||
setBox()
|
||||
createCircle()
|
||||
moveCircle()
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -32,7 +32,9 @@ You only need to create & submit the JS file `pick-and-click.js`; we're providin
|
|||
- the HTML file [pick-and-click.html](./pick-and-click.html) to open in the browser, which includes:
|
||||
|
||||
- the JS script which will enable you to run your code.
|
||||
- some CSS pre-styled classes: feel free to use those as they are, or modify them.
|
||||
|
||||
- the CSS file [pick-and-click.css](./pick-and-click.css) feel free to use those as they are, or modify them.
|
||||
|
||||
|
||||
### Expected result
|
||||
|
||||
|
|
|
@ -0,0 +1,66 @@
|
|||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: 5rem;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
svg {
|
||||
filter: invert(100%);
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
svg line {
|
||||
stroke-width: 0.6px;
|
||||
stroke: grey;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: fixed;
|
||||
filter: invert(100%);
|
||||
font-size: 50px;
|
||||
cursor: pointer;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.hsl {
|
||||
filter: invert(100%);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.hue {
|
||||
top: 100px;
|
||||
right: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.luminosity {
|
||||
bottom: 100px;
|
||||
left: 100px;
|
||||
}
|
|
@ -1,86 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Pick & click</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
|
||||
<style>
|
||||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: 5rem;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
svg {
|
||||
filter: invert(100%);
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
svg line {
|
||||
stroke-width: 0.6px;
|
||||
stroke: grey;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: fixed;
|
||||
filter: invert(100%);
|
||||
font-size: 50px;
|
||||
cursor: pointer;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.hsl {
|
||||
filter: invert(100%);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.hue {
|
||||
top: 100px;
|
||||
right: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.luminosity {
|
||||
bottom: 100px;
|
||||
left: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="./pick-and-click.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="module">
|
||||
|
||||
import { pick } from './pick-and-click.js'
|
||||
import { pick } from './pick-and-click.js'
|
||||
|
||||
pick()
|
||||
pick()
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -46,9 +46,10 @@ You only need to create & submit the JS file `pimp-my-style.js`. Ee're providing
|
|||
- the HTML file [pimp-my-style.html](./pimp-my-style.html) to open in the browser, which includes:
|
||||
|
||||
- the JS script running some code, and which will enable you to run yours.
|
||||
- some CSS pre-styled classes: feel free to use those as they are, or modify them.
|
||||
- the data file [pimp-my-style.data.js](./pimp-my-style.data.js) from which you can import `styles`.
|
||||
|
||||
- the CSS file [pimp-my-style.css](./pimp-my-style.css) feel free to use those as they are, or modify them.
|
||||
|
||||
### Expected result
|
||||
|
||||
You can see an example of the expected result [here](https://youtu.be/VIRf3TBDTN4)
|
||||
|
|
|
@ -0,0 +1,154 @@
|
|||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
color: var(--text);
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
|
||||
button {
|
||||
user-select: none;
|
||||
letter-spacing: 0;
|
||||
color: white;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.button:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.button.unpimp:before {
|
||||
content: 'Un';
|
||||
}
|
||||
|
||||
.button {
|
||||
background: var(--background);
|
||||
font-family: serif;
|
||||
width: 70%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.one {
|
||||
font-size: 75px;
|
||||
}
|
||||
|
||||
.two {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.three {
|
||||
letter-spacing: 15px;
|
||||
}
|
||||
|
||||
.four {
|
||||
padding: 20px 40px;
|
||||
border: solid 1px var(--clear);
|
||||
}
|
||||
|
||||
.five {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.six {
|
||||
border: none;
|
||||
box-shadow: 8px 8px 15px rgba(255, 255, 255, 0.075),
|
||||
-10px -10px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.seven {
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
.eight {
|
||||
border: solid 0.5px var(--purple);
|
||||
}
|
||||
|
||||
.nine {
|
||||
background: var(--purple);
|
||||
color: white;
|
||||
position: relative;
|
||||
box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.ten:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
top: -16px;
|
||||
left: -16px;
|
||||
border-radius: 100px;
|
||||
border: solid 1px var(--clear);
|
||||
}
|
||||
|
||||
.eleven:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
padding: 30px;
|
||||
top: -31px;
|
||||
left: -31px;
|
||||
background: white;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.twelve {
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
.thirteen {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.fourteen {
|
||||
animation: animation 1.5s linear infinite;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--purple) 0%,
|
||||
white 48%,
|
||||
white 52%,
|
||||
var(--purple) 100%
|
||||
);
|
||||
background-size: 500px 640px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes animation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fifteen {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
|
@ -1,181 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Pimp my style</title>
|
||||
<title>Pimp my style</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
|
||||
<style>
|
||||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
color: var(--text);
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
|
||||
button {
|
||||
user-select: none;
|
||||
letter-spacing: 0;
|
||||
color: white;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.button:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.button.unpimp:before {
|
||||
content: 'Un';
|
||||
}
|
||||
|
||||
.button {
|
||||
background: var(--background);
|
||||
font-family: serif;
|
||||
width: 70%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.one {
|
||||
font-size: 75px;
|
||||
}
|
||||
|
||||
.two {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.three {
|
||||
letter-spacing: 15px;
|
||||
}
|
||||
|
||||
.four {
|
||||
padding: 20px 40px;
|
||||
border: solid 1px var(--clear);
|
||||
}
|
||||
|
||||
.five {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.six {
|
||||
border: none;
|
||||
box-shadow: 8px 8px 15px rgba(255, 255, 255, 0.075),
|
||||
-10px -10px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.seven {
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
.eight {
|
||||
border: solid 0.5px var(--purple);
|
||||
}
|
||||
|
||||
.nine {
|
||||
background: var(--purple);
|
||||
color: white;
|
||||
position: relative;
|
||||
box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.ten:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
top: -16px;
|
||||
left: -16px;
|
||||
border-radius: 100px;
|
||||
border: solid 1px var(--clear);
|
||||
}
|
||||
|
||||
.eleven:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
padding: 30px;
|
||||
top: -31px;
|
||||
left: -31px;
|
||||
background: white;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.twelve {
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
.thirteen {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.fourteen {
|
||||
animation: animation 1.5s linear infinite;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--purple) 0%,
|
||||
white 48%,
|
||||
white 52%,
|
||||
var(--purple) 100%
|
||||
);
|
||||
background-size: 500px 640px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes animation {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 500px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fifteen {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="./pimp-my-style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="module">
|
||||
|
||||
import { pimp } from './pimp-my-style.js'
|
||||
import { pimp } from './pimp-my-style.js'
|
||||
|
||||
const body = document.querySelector('body')
|
||||
const body = document.querySelector('body')
|
||||
|
||||
const button = document.createElement('button')
|
||||
button.className = 'button'
|
||||
button.textContent = 'pimp my style'
|
||||
body.append(button)
|
||||
const button = document.createElement('button')
|
||||
button.className = 'button'
|
||||
button.textContent = 'pimp my style'
|
||||
body.append(button)
|
||||
|
||||
button.addEventListener('click', pimp)
|
||||
button.addEventListener('click', pimp)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
|
@ -28,11 +28,12 @@ You only need to create & submit the JS file `where-do-we-go.js`; we're providin
|
|||
- the HTML file [where-do-we-go.html](./where-do-we-go.html) to open in the browser, which includes:
|
||||
|
||||
- the JS script which will enable you to run your code
|
||||
- some CSS pre-styled classes: feel free to use those as they are, or modify them
|
||||
|
||||
- the data file [where-do-we-go.data.js](./where-do-we-go.data.js) from which you can import `places`
|
||||
|
||||
- the images to use, in this [compressed folder](https://assets.01-edu.org/where-do-we-go_images.zip)
|
||||
- the CSS file [where-do-we-go.css](./where-do-we-go.css) feel free to use those as they are, or modify them.
|
||||
|
||||
- the images to use, in this [compressed folder](https://assets.01-edu.org/where-do-we-go_images.zip) or you can can fetch from the public URL, example `https://public.01-edu.org/subjects/where-do-we-go/where-do-we-go_images/arlit.jpg` [arlit](https://public.01-edu.org/subjects/where-do-we-go/where-do-we-go_images/arlit.jpg)
|
||||
|
||||
### Expected result
|
||||
|
||||
|
|
|
@ -0,0 +1,56 @@
|
|||
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
section {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.location {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
color: white;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 100px;
|
||||
line-height: 130px;
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.direction {
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
top: 100px;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
line-height: 60px;
|
||||
color: white;
|
||||
white-space: pre-wrap;
|
||||
}
|
|
@ -1,72 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Where do we go?</title>
|
||||
<title>Where do we go?</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
|
||||
<style>
|
||||
:root {
|
||||
--background: hsl(0, 0%, 12%);
|
||||
--text: hsl(0, 0%, 80%);
|
||||
--clear: hsl(0, 0%, 65%);
|
||||
--disabled: hsl(0, 0%, 35%);
|
||||
--purple: #bb73e6;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
letter-spacing: 1.5px;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
section {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.location {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
color: white;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 100px;
|
||||
line-height: 130px;
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.direction {
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
top: 100px;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
line-height: 60px;
|
||||
color: white;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="./where-do-we-go.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="module">
|
||||
import { explore } from './where-do-we-go.js'
|
||||
import { explore } from './where-do-we-go.js'
|
||||
|
||||
explore()
|
||||
explore()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in New Issue