We Keep Coding

Saving a toogle switch value in Django

Hi I am just trying to save a toggle switch value onclick to save to a Boolean field in Django
home.html
<style>
.home-container{
display:grid;
grid-template-columns: 1fr 4fr;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<div>
<label class="switch">
** <input type="checkbox" checked>**
<span class="slider round"></span>
</label>
</div>
models.py
is_active = models.BooleanField(default=False)
urls.py
path('engine/', views.engine, name="engine"),
I tried several suggestions on the web but could not make it work as I am new to development.
I know I need to use javascript. Please help write my views.py and javascript in home.html.

How to change slider image

How can I insert images of a sun and moon (or any two images) in the slider so when it is clicked it will change the image based on when dark/light mode is enabled? I'm not sure how to go about this. I want to keep the slider as I like the transition but I want images inside of there showing a moon when lightmode is enabled to allow a user to click it for dark mode and the same for when it is in dark mode.
HTML:
<main id="main">
<label class="switch">
<input type="checkbox" onclick="darkLight()" id="checkBox" >
<span class="slider"></span>
</label>
</main>
CSS:
body {
margin: 0;
padding: 0;
}
main {
height: 100vh;
width: 100vw;
transition: background 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
}
main p {
align-self: center;
font-family: sans-serif;
transition: color 0.3s ease;
}
/*TOGGLE COLORS*/
.dark {
background: #545454;
color: #efefef;
}
p {
background: none !important;
}
/*SWITCH*/
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
align-self: center;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: #2196f3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider {
border-radius: 30px;
}
.slider:before {
border-radius: 50%;
}
JS:
$('#main').toggleClass(localStorage.toggled);
function darkLight() {
/*DARK CLASS*/
if (localStorage.toggled != 'dark') {
$('#main, p').toggleClass('dark', true);
localStorage.toggled = "dark";
} else {
$('#main, p').toggleClass('dark', false);
localStorage.toggled = "";
}
}
/*Add 'checked' property to input if background == dark*/
if ($('main').hasClass('dark')) {
$( '#checkBox' ).prop( "checked", true )
} else {
$( '#checkBox' ).prop( "checked", false )
}

It's possible to put a background image inside the slider button, with CSS. You need an image URL for the selectors .slider:before and input:checked + .slider:before. Here's an example with some imgur URLs, but I would use your own just to guard against possible link removal in the future.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
align-self: center;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
background-image: url("https://i.imgur.com/6NVOxEL.png");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
/*background-color: white;*/
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: #2196f3;
}
input:checked + .slider:before {
background-image: url("https://i.imgur.com/L8cR8EK.png");
background-size: contain;
background-repeat: no-repeat;
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider {
border-radius: 30px;
}
.slider:before {
border-radius: 50%;
}
<label class="switch">
<input type="checkbox" id="checkBox">
<span class="slider">
</span>
</label>

Radio button or an image?

I am working on a react application.
I have this requirement to show a switch similar to the one used in an iPhone setting.
I am able to use two images based on the on/off state and display it.
Is it better to create a component using input type=checkbox ?

You don't need an image for this:
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<!-- Rounded switch -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
I took it from here: w3schools
[edit] A one that looks more similar to the iphone switch
.form-switch {
display: inline-block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.form-switch i {
position: relative;
display: inline-block;
margin-right: .5rem;
width: 46px;
height: 26px;
background-color: #e6e6e6;
border-radius: 23px;
vertical-align: text-bottom;
transition: all 0.3s linear;
}
.form-switch i::before {
content: "";
position: absolute;
left: 0;
width: 42px;
height: 22px;
background-color: #fff;
border-radius: 11px;
transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
transition: all 0.25s linear;
}
.form-switch i::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 11px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
transform: translate3d(2px, 2px, 0);
transition: all 0.2s ease-in-out;
}
.form-switch:active i::after {
width: 28px;
transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
.form-switch input { display: none; }
.form-switch input:checked + i { background-color: #4BD763; }
.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }
<label class="form-switch">
<input type="checkbox">
<i></i>
Select Me
</label>
source: cssscript

Yes AFAIK, that's how most of the ui library does it. They do it by using label html tag and hiding checkbox and using css selectors to know when to display on/off state. Checkboxes are a very powerfull concepts in HTML. You can check this article from css-tricks which where the checkboxes can be used.

Storing and retrieving a checkbox's value in a chrome extension

I'm making a chrome extension and I want to be able to save and read the status of a checkbox (formatted to look like a switch) to affect how the program runs.
At the moment I can't even access the checkbox in any way, granted I've never used javascript in any capacity before. To test if I can even read the current state I've used
console.log(document.getElementById("activeSwitch").checked)
or some variant thereof.
This is my popup html I'm using to create the button
<head>
<title>test</title>
<script src="popup.js"></script>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<div>
<p><b>test extension</b></p>
<label id="activeSwitch" class="switch">
<input type="checkbox" checked/>
<span class="slider round"></span>
</label>
</div>
</body>

How to add function in toggle button

I want to add some functionality on toggle button change. Currently it has no functionality in toggle change. I want a method that will be called on toggle change and do some work if it is off and if it is on. I want to show and hide some link under toggle change. I have attached the sample code (CSS and HTML). Please some one help me to write the syntax.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>

You can use plain javascript by putting an onchange function on the input checkbox and toggling the links display property. The function below looks at the checkbox whenever it is click and if it is checked, will display the link as block, and if it is unchecked, it will display the link as none (hide it).
function toggleCheck() {
if(document.getElementById("myCheckbox").checked === true){
document.getElementById("aLink").style.display = "block";
} else {
document.getElementById("aLink").style.display = "none";
}
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" id="myCheckbox" onchange="toggleCheck()" checked>
<span class="slider round"></span>
</label>
<a id="aLink" href="" style="display:block;">Link</a>

$('#toggle').on('click', function(){
if ( $(this).is(':checked') ) {
$('#link').show();
}
else {
$('#link').hide();
}
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Toggle Switch</h2>
<label class="switch">
<input id="toggle" type="checkbox" checked>
<span class="slider round"></span>
</label>
<br/>
Link