- Dark Mode Is A Feature That Some Websites Have That Changes The Colour Scheme Of A Website To Reduce Eye Strain At Night 1 (92.34 KiB) Viewed 88 times
* {
box-sizing: border-box;
}
body, #app {
color: #333533;
background-color: #FFFFFF;
padding: 0;
margin: 0;
}
nav .pure-menu-link {
color: #CFDBD5;
font-weight: bold;
}
aside {
border-left: 1px solid #111111;
}
header, footer {
padding: 1em;
background-color: #F5CB5C;
color: #333533;
}
header {
margin-bottom: 1em;
border-bottom: 1px solid #333533;
}
footer {
margin-top: 1em;
border-top: 1px solid #333533;
text-align: center;
}
h1, h2, h3, h4, h5 {
font-family: 'Playfair Display', serif;
font-weight: 500;
}
.pure-button-active {
font-weight: bold;
}
.pad {
padding: 1em;
}
.item {
clear: left;
padding: 0.5em 0;
}
#ad img {
max-width: 24em;
max-height: 24em;
}
#ad h2 {
text-align: center;
}
#stores img {
width: 6em;
float: right;
margin-left: 1em;
}
#items img {
width: 12em;
float: left;
margin-right: 1em;
}
Here is JS document
/*
Top menu (task 1.5):
{ title:'Home', url:'/' }
{ title:'About', url:'/about' }
{ title:'Contact Us', url:'/contact' }
Top menu 2 (task 1.7):
{ title:'Home', url:'/', submenus: [] }
{ title:'About', url:'/about',
submenus: [
{ title:'Who we are',
url:'/about#us' },
{ title:'What we do',
url:'/about#store' },
{ title:'Our range',
url:'/about#range' }
]
}
{ title:'Contact Us', url:'/contact',
submenus: [
{ title:'Information',
url:'/contact#info' },
{ title:'Returns',
url:'/contact#return' },
{ title:'Locate Us',
url:'/contact#locate' }
]
}
Stores (task 1.8):
{ name:'Adelaide City', address:'45 Florabunda Lane,
Adelaide, 5000', counter: 0,
img:'https://upload.wikimedia.org/wikipedia/ ... _front.jpg'
},
{ name:'Steelton South', address:'77 Weigall Avenue, Steelton,
5413', counter: 0,
img:'https://upload.wikimedia.org/wikipedia/ ... -front.jpg'
},
{ name:'Milton', address:'33
McGregor Street, Milton, 5880', counter: 0,
img:'https://upload.wikimedia.org/wikipedia/ ... _front.JPG'
}
*/
const SPECIALS = [
{ name:'Salt', price:'$0.99',
url:'https://live.staticflickr.com/22/274761 ... f0f5_b.jpg'
},
{ name:'Pepper', price:'$2.49',
url:'https://live.staticflickr.com/191/44954 ... adeb_b.jpg'
},
{ name:'Tomato Sauce', price:'$3.50',
url:'https://upload.wikimedia.org/wikipedia/ ... ash%29.jpg'
},
{ name:'Worchestershire Sauce', price:'$4.20',
url:'https://upload.wikimedia.org/wikipedia/ ... ce_001.jpg'
}
];
var vueinst = new Vue({
el: '#app',
data:{
choose: 'Choose ...'
}
});
Here is HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Practical Excercise
6</title>
<meta charset="UTF-8">
<link rel="preconnect"
href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?famil ... splay=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://unpkg.com/[email protected]/build/pure-min.css">
<link rel="stylesheet"
href="prac6.css">
<script
src="https://cdn.jsdelivr.net/npm/[email protected] ... "></script>
<script src="prac6.js"
defer></script>
</head>
<body>
<div id="app">
<header>
<h1>Wendy's Delicious Condiments (and Fruit)</h1>
<nav
class="pure-menu pure-menu-horizontal">
<ul id="topmenu" class="pure-menu-list">
</ul>
<div class="pure-menu">
<ul id="submenu"
class="pure-menu-list">
</ul>
</div>
</nav>
</header>
<div class="pad"
id="ad">
<button class="pure-button" style="float:right;"
onclick="vueinst.show_ad = false;">close</button>
<img
src="" alt=""
onclick="vueinst.special=SPECIALS[Math.floor((Math.random() *
3))];" />
<h3>Some Name</h3>
<p>$Some.Price</p>
</div>
<main
class="pure-g">
<div
class="pad pure-u-2-3">
<div id="items">
<input type="text" class="pure-u-3-4"
/><button class="pure-button
pure-u-1-4">Search</button>
</div>
<div id="comments">
<textarea rows="4" cols="60"
class="pure-u-1" >Comments</textarea><button
class="pure-button pure-u-1-4">Add comment</button>
</div>
</div>
<aside class="pad pure-u-1-3">
<h3>Salt or Pepper?</h3>
<!-- TASK 1.1 -->
<p id="sp"></p>
<button class="pure-button pure-u-1-4"
onclick="vueinst.choose='Salt';">Salt</button>
<button class="pure-button pure-u-1-4"
onclick="vueinst.choose='Pepper!';">Pepper</button>
<hr />
<h3>Dark Mode:</h3>
<div class="pure-button-group" role="group"
aria-label="Nightmode">
<button class="pure-button
pure-button-active" onclick="vueinst.dark_mode =
false;">OFF</button>
<button class="pure-button"
onclick="vueinst.dark_mode = true;">ON</button>
</div>
<hr />
<div id="stores">
</div>
</aside>
</main>
<footer><p>© 2021
WDC</p></footer>
</div>
</body>
</html>
Dark mode is a feature that some websites have that changes the colour scheme of a website to reduce eye strain at night time. Modifying the provided files: • Create a Vue.js data property called dark_mode) whose initial value is set to false. • Set up your page so that when dark_mode is true the following styles change: • The background-color of the #app div is #333533. • The text color for the #app div is #F5CB5C. • And the on/off buttons change classes: • The on button for dark mode gains classes pure-button-active and pure-button-primary • The off button for dark mode loses the class pure-button-active • If you've done this correctly, clicking the dark mode on/off buttons should toggle dark mode. • Do not change onclick attributes of the dark mode buttons. liments (and Fruit) Search Salt or Pepper? Choose... Salt Pepper Dark Mode: OFF ON Adelaide City 45 Florabunda Lane, Adelaide, 5000 • Hint: You can modify the CSS file to take advantage of classes