Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I’m typing some really basic JavaScript into an F12 console in Chrome and see the following:
What is going on here? I would expect both to return true. Perhaps both would return false, if JavaScript did something I’m not aware of with comparisons. Since the second, simpler, case returns true, I’m lost.
i wish i had a live search feature in my app, and i have got what i need but i am confused as to how i should do it to get the details and revision buttons to work
for my code:
controller:
public function index()
{
$asset = AssetModels::with('typeAsset', 'ctgrAsset', 'permitInsurance', 'user')->get();
return view('pages.asset.index', compact([
'asset',
]));
}
function action(Request $request)
{
if ($request->input('ajax')) {
$output = '';
$query = $request->get('query');
if ($query != '') {
$data = AssetModels::with('typeAsset', 'ctgrAsset', 'permitInsurance', 'user')
->where('no_unit', 'like', '%' . $query . '%')
->orderBy('id', 'desc')
->get();
} else {
$data = AssetModels::with('typeAsset', 'ctgrAsset', 'permitInsurance', 'user')
->orderBy('id', 'desc')
->get();
}
$total_row = $data->count();
if ($total_row > 0) {
foreach ($data as $row) {
$output .= '
<tr>
<td>
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#detaildataunit' . $row->id . '">DETAIL</button>
<button class="btn btn-danger btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#revisidataunit">REVISI</button>
</td>
<td>' . $row->no_unit . '</td>
<td>' . $row->typeAsset->type_name . '</td>
<td>' . $row->ctgrAsset->ctgr_name . '</td>
<td>' . $row->manufactur . ' - ' . $row->model . '</td>
</tr>
';
}
} else {
$output = '
<tr>
<td align="center" colspan="5">No Data Found</td>
</tr>
';
}
$data = array(
'table_data' => $output,
'total_data' => $total_row
);
return json_encode($data);
}
}
index:
@extends('app')
@section('title-app')
Data Unit
@endsection
@section('content')
@if (session('success'))
@include('partials.alert-success')
@endif
@if (session('error'))
@include('partials.alert-error')
@endif
<div class="card p-3">
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<a href="{{ route('create.asset') }}" class="btn btn-primary me-md-2 pe-5 ps-5">Tambah</a>
</div>
<div class="row mt-4 mb-5">
<div class="col-md-3">
<div>
<label for="filter" class="fw-bold">Nomor Unit</label>
<input type="text" class="form-control" id="search" placeholder="Nomor Unit"
aria-describedby="defaultFormControlHelp" name="search"/>
</div>
</div>
<div class="col-md-3">
<div>
<label for="filter" class="fw-bold">Tipe</label>
<select class="form-select" name="id_type" id="exampleFormControlSelect1"
aria-label="Default select example">
<option selected value="">- Semua -</option>
<option value="#">
type_name</option>
</select>
</div>
</div>
<div class="col-md-3">
<div>
<label for="filter" class="fw-bold">Status</label>
<select class="form-select" name="flg_status" id="exampleFormControlSelect1"
aria-label="Default select example">
<option selected value="">- Semua -</option>
<option value="T">Tersedia</option>
</select>
</div>
</div>
<div class="col-md-1 d-flex align-items-end">
<button type="submit" class="btn btn-primary">Cari</button>
</div>
</div>
<div class="table-responsive text-nowrap">
<table class="table table-striped table-hover">
<thead>
<tr class="table-active">
<th class="fw-bold">Aksi</th>
<th class="fw-bold">No. Unit</th>
<th class="fw-bold">Tipe</th>
<th class="fw-bold">Kategori</th>
<th class="fw-bold">Merek & Model</th>
</tr>
</thead>
<tbody class="table-border-bottom-0">
</tbody>
</table>
</div>
<div class="row pt-5">
<div class="col-lg-10">
<ul class="pagination">
</ul>
<br>
<span>Total data 4, halaman 2 dari
4</span>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
fetch_data_unit();
function fetch_data_unit(query = '')
{
$.ajax({
url:"{{ route('action') }}",
method:'GET',
data:{ajax: 1, query:query},
dataType:'json',
success:function(data)
{
$('tbody').html(data.table_data);
$('#total_records').text(data.total_data);
}
})
}
$(document).on('keyup', '#search', function(){
var query = $(this).val();
console.log('Query: ' + query);
fetch_data_unit(query);
});
$(document).on('click', '.btn-detail', function() {
var rowId = $(this).data('row-id');
$('#detailModal').modal('show');
});
});
</script>
@endsection
I have the code for the detailed modal:
@include('pages.asset.detail')
I have a search feature, the way it works is that you have to input data first and then use the search button. I want the data to be filtered in real time when the user starts inputting data. The feature I want is in this video https://youtu.be/ig8gXxFHO6s?si=WKZm6fJeVZezhqE7 but I need additional detail buttons and revisions in the form of a pop up/modal
When deploying nextjs on vercel, the codes of the two function points of vercel’s serveless function and nextjs’s Api Routes seem to be the same again. Should we deploy it as Vercel serveless function or as nextjs Api routes? Who works at last
I don’t seem to have found a description of both in their official documents
I am trying to setup nested DIVs to be sortable with JQuery, but it does not work. Below is the code I am using and here is the link to JSFiddle
<div class="noDvi lay01">
<div class="moveDvi">
test 01
</div>
<div class="noMove lay01">
<div class="moveDvi">
test 02
</div>
<div class="noMove lay01">
<div class="moveDvi">
test 03
</div>
<div class="noMove lay01">
<div class="moveDvi">
test 04
</div>
</div>
</div>
</div>
</div>
$(".moveDvi").sortable({
connectwith: ".noMove",
placeholder: "placeHolder",
});
Someone can help me? I need to create a ‘Talk to Strangers’ chat using Talk JS, but I need to communicate and use the same users from Shopify.
How should I start?
I’ve tried to read this article, but have no success:
https://shopify.dev/docs/custom-storefronts/building-with-the-customer-account-api/getting-started
It’s been a puzzle, I don’t no much about shopify
Is there a way to guarantee the existence of object stores in an indexedDB without changing the version number?
Context:
One of my users has an indexedDB set to the same version as everyone else, but with no object stores. I’ve no idea how they did it so I can’t predict if it will happen again and I don’t know how widespread the problem could be out in the public arena.
I tried using the following code to rebuild the missing objectStore
this.request = window.indexedDB.open(this.dbName, this.DB_VERSION);
this.request.onsuccess = (event) => {
const database = event.target.result;
if (!database.objectStoreNames.contains(store)) {
const newStore = database.createObjectStore(store, {keyPath: 'key'});
newStore.createIndex('expiry_idx', 'exp');
}
}
but the browser is saying I can’t run createObjectStore unless I am in the onupgradeneeded event. At this point the database is not being upgraded. This user and everyone else is on version 5. I could change the code to try to open v6 and force an upgrade that repairs it, but for all I know someone else could corrupt v6.
I like to create the signup page using reactjs and i can use react-bootstrap for css. I can add the font, style and color of the elements. But I can’t change the size of the container, button and input field. after change the size it will not reflect.
I try to resize the container, input field and button to large size. but it won’t reflect in the output. I want resize that and add some changes to it.
Im trying to recreate what its shown here https://palette.supply/, specifically the container bigger than the screen and the text sticking to the middle as you move the screen around.
I tried using innerWidth and innerHeight, also following the mouse around but i feel like im doing it all wrong. I cant even get the text to start right in the middle.
let gallery = document.getElementById("gallery");
let text = document.getElementById("text-container");
window.onmousemove = e => {
const mouseX = e.clientX,
mouseY = e.clientY;
const xDecimal = mouseX / window.innerWidth,
yDecimal = mouseY / window.innerHeight;
const maxX = gallery.offsetWidth - window.innerWidth,
maxY = gallery.offsetHeight - window.innerHeight;
const panX = maxX * xDecimal * -1,
panY = maxY * yDecimal * -1;
gallery.animate({
transform: `translate(${panX}px, ${panY}px)`
}, {
duration: 4000,
fill: "forwards",
easing: "ease"
})
//text.style.top = `${}px`;
//text.style.left = `${}px`;
}body {
height: 100vh;
margin: 0px;
overflow: hidden;
}
#gallery {
height: 140vmax;
width: 140vmax;
position: absolute;
}
#text-container {
top: 50%;
left: 50%;
position: relative;
}<div id="gallery">
<div id="text-container">
<h1>TEST</h1>
</div>
</div>Any ideas? Thanks in advance!
This is a snippet from my index.html
<div class="My-Title" ng-show="isHomePage()">
<div class="container">
<div class="row">
<div class="col-md-8">
<h2 class="My-Title-Title">My Title</h2>
</div>
<div class="col-md-10 text-container">Some text about the business</div>
</div>
</div>
</div>
Without ng-show it appears on each page of the site. The goal is to just have it show just for ‘/’ however all I am getting is div.My-Title.ng-hide when looking at the dev tools and nothing showing on the page.
The relevant snippets from the app.js
module.run(['$rootScope', '$route', function($rootScope, $route) {
$rootScope.$on('$routeChangeSuccess', function() {
document.title = $route.current.title;
});
}]);
.
.
.
angular.module('app').controller('HomeController', function($scope, $location) {
$scope.isHomePage = function() {
return $location.path() === '/';
};
});
.
.
.
$routeProvider.when( '/', {
templateUrl: '/partials/site/index.html',
controller: 'noticeController',
title: "business title"
Tested various different isHomePage functions. Must be something simple I’m missing!
I have a scenario where I have a Javascript button which is called when a button is clicked.
I’m getting the following function after downloading the sample from this website.
The function looks like as shown below:
function printPDF(){
var config = getUpdatedConfig();
var opts = getUpdatedOptions(true);
var printData = [
{ type: 'pixel', format: 'pdf', flavor: 'file', data: 'assets/pdf_sample.pdf', options: opts }
];
qz.print(config, printData).catch(displayError);
}
This will basically grab the pdf_sample.pdf located inside the assets folder and show me a print dialog.
However, I’m getting a pdf in a different manner as explained below:
For example if I past the following URL on the web browser:
http://localhost:8080/mywebsite/boxlabelpdf.htm , a PDF opens in the same tab.
Similarly, I tried putting the following in the above function’s printData variable like this:
var printData = [
{ type: 'pixel', format: 'pdf', flavor: 'file', data: 'boxlabelpdf.htm', options: opts }
];
And I keep getting the following error:
Error: Cannot parse (FILE)http://localhost:8080/mywebsite/boxlabelpdf.htm as a PDF file: Error: End-of-File, expected line at offset 6617
How can I get this file from the URL just like it’s done above for data: 'assets/pdf_sample.pdf' scenario? Probably if I don’t have to download it locally that would be great.
So when I click the edit button the first time everything works but when I click it the second time everything deletes and I’m left with only the edit button and the delete button which don’t do anything
const addtodo = document.querySelector("#addtodo");
const btn = document.querySelector("#btn");
const ul = document.querySelector("ul");
const btns = document.querySelectorAll(".delete-btn");
const newTodo = () => {
while (addtodo.value != "") {
let todo = addtodo.value;
const newLi = document.createElement("li")
const delBtn = document.createElement("button")
const editBtn = document.createElement("button")
newLi.innerText = todo;
delBtn.innerText = "Delete";
delBtn.classList.add("del-btn");
editBtn.innerText = "Edit";
editBtn.classList.add("del-btn");
editBtn.classList.add("btn-margin");
ul.appendChild(newLi);
newLi.appendChild(editBtn);
newLi.appendChild(delBtn);
addtodo.value = "";
//edit btn
editBtn.addEventListener("click", () => {
ul.removeChild(newLi)
newLi.removeChild(editBtn);
newLi.removeChild(delBtn);
const txtInput = document.createElement("input")
const conBtn = document.createElement("button")
txtInput.setAttribute("type", "text");
txtInput.setAttribute("value", newLi.innerText);
txtInput.style.width = "100%";
conBtn.innerText = "Confirm";
conBtn.classList.add("del-btn");
conBtn.classList.add("btn-margin");
ul.appendChild(txtInput)
ul.appendChild(conBtn)
conBtn.addEventListener("click", () => {
ul.removeChild(txtInput)
ul.removeChild(conBtn)
newLi.innerText = txtInput.value;
ul.appendChild(newLi);
ul.appendChild(editBtn);
ul.appendChild(delBtn);
})
})
//delete todo
delBtn.addEventListener("click", () => {
ul.removeChild(newLi)
});
}
};
btn.addEventListener("click", () => {
newTodo();
});
tried a couple of things but nothing worked im a beginner so better to ask
Trying to have a button created in JavaScript to use the background image of the specific API image
I seen many suggestions to use .style.backgroundImage = 'Url("yourimagelink")';. But can’t seem to figure it out.
let button = document.createElement('button');
button.classList.add('btn-image');
button.innerText = item.name;
button.style.backgroundImage = item.imageUrl;
No image appears and no errors too.
I’m trying to achieve the following: given a focusable HTML element, I want screen readers to announce it every time I call focus() on it. The announcement should happen even when the element gets focused several times in a row, i.e. even if the element was already focused before applying focus on it. Can anyone please help me with that? Thanks in advance!
I’m developing a word search in react native.
The whole part of the grid and randomization of letters is ready, but I’m finding is difficult in selection the word search.
Does anyone know a way to make the selection?
follow the code:
this is the logic to create the grid and add the letters
class WordSearchGame extends Component {
constructor(props) {
super(props);
this.state = {
gridLetras: this.gerarGridAleatorio(),
listaPalavras: [
"PESCADOR",
"BOMBEIRO",
"PADEIRO",
"MECANICO",
"POLICIAL",
],
palavrasEncontradas: [],
};
}
gerarGridAleatorio = () => {
const gridSizeX = 17; // Tamanho do grid horizontal
const gridSizeY = 12; // Tamanho do grid vertical
const grid = [];
for (let i = 0; i < gridSizeX; i++) {
const row = [];
for (let j = 0; j < gridSizeY; j++) {
row.push("");
}
grid.push(row);
}
return grid;
};
preencherGridComLetrasAleatorias = () => {
const { gridLetras } = this.state;
const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; // Letras possíveis
for (let i = 0; i < gridLetras.length; i++) {
for (let j = 0; j < gridLetras[i].length; j++) {
if (gridLetras[i][j] === "") {
// Preencher com letra aleatória
const randomIndex = Math.floor(Math.random() * alphabet.length);
gridLetras[i][j] = alphabet[randomIndex];
}
}
}
this.setState({ gridLetras });
};
And this one to add the words to the grid
adicionarPalavraAoGrid = (palavra) => {
const { gridLetras } = this.state;
const gridSize = gridLetras.length;
const directions = ["horizontal", "vertical"];
const selectedDirection =
directions[Math.floor(Math.random() * directions.length)];
if (selectedDirection === "horizontal") {
let x, y;
do {
x = Math.floor(Math.random() * (gridSize - palavra.length + 1));
y = Math.floor(Math.random() * gridSize);
} while (!this.ehPosicaoValida(gridLetras, palavra, x, y, "horizontal"));
for (let i = 0; i < palavra.length; i++) {
gridLetras[y][x + i] = palavra[i];
}
} else {
let x, y;
do {
x = Math.floor(Math.random() * gridSize);
y = Math.floor(Math.random() * (gridSize - palavra.length + 1));
} while (!this.ehPosicaoValida(gridLetras, palavra, x, y, "vertical"));
for (let i = 0; i < palavra.length; i++) {
gridLetras[y + i][x] = palavra[i];
}
}
this.setState({ gridLetras });
};
ehPosicaoValida = (grid, palavra, x, y, direcao) => {
const gridSize = grid.length;
if (direcao === "horizontal") {
for (let i = 0; i < palavra.length; i++) {
if (grid[y][x + i] !== "" && grid[y][x + i] !== palavra[i]) {
return false;
}
}
} else {
for (let i = 0; i < palavra.length; i++) {
if (grid[y + i][x] !== "" && grid[y + i][x] !== palavra[i]) {
return false;
}
}
}
return true;
};
componentDidMount() {
this.state.listaPalavras.forEach((palavra) => {
this.adicionarPalavraAoGrid(palavra);
});
this.preencherGridComLetrasAleatorias();
}
i need to make this project for school and i cant figure out how i can make the animation of the progress bars trigger when in viewport. help would very much be appreciated!! i have tried so many things, but im only a first year softwaredevelopment student and i just can’t figure it out
this is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/b185104bc3.js" crossorigin="anonymous"></script>
<title>My Portfolio</title>
<link rel="stylesheet" href="style-liselot.css">
<script src= "portfolio-liselot.js"></script>
</head>
<body>
<header>
<img src="foto-liselot.jpg" alt="Liselot Meleiste">
<h1>Liselot Melieste</h1>
<p>Project P2</p>
</header>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li>
<a href="#">Portfolio's</s></a>
<ul>
<li><a href="portfolio-jesse.html">Jesse Steunenberg</a></li>
<li><a href="portfolio-liselot.html">Liselot Melieste</a></li>
<li><a href="portfolio-lars.html">Lars Pannekoek</a></li>
<li><a href="portfolio-tim.html">Tim Bos</a></li>
<li><a href="portfolio-redouan.html">Redouan Yaakoubi</a></li>
</ul>
</li>
<li><a href="#OverMij">Over Mij</a></li>
<li><a href="#o&c">Opleidingen, Stages en Curcussen</a></li>
<li><a href="#werkervaring">Werkervaring</a></li>
<li><a href="#vaardigheden">Vaardigheden</a></li>
<li><a href="#competenties">Competenties</a></li>
<li><a href="#schoolprojecten">Schoolprojecten</a></li>
</ul>
</nav>
<section id="OverMij" class="section1">
<h2>Over mij</h2><br>
<p> Mijn naam is Liselot Melieste, geboren op 22 februari 2004 in Beverwijk. </p>
<p> Sinds ik twee jaar oud ben woon ik al in Apeldoorn.</p>
<p> Momenteel volg ik de opleiding Software Developer aan Aventus Apeldoorn, waar ik al een half jaar actief bezig ben.</p>
<p> Naast mijn studie werk ik als keukenhulp in de horeca en ben ik op zoek naar een bijbaan in de ICT-wereld. </p>
<p> Ik beschouw mezelf als leergierig en gemotiveerd, altijd klaar om nieuwe uitdagingen aan te gaan.</p>
<p> In mijn vrije tijd geniet ik van activiteiten zoals haken, gamen, lezen en het omgaan met dieren.</p>
</section>
<section id="o&c" class="section2">
<h2>Opleidingen, stages en Curcussen</h2><br>
<div class="container">
<div class="column">
<h4>MBO Software Development niveau 4</h4>
<p>Aventus, Apeldoorn</p>
<p class="cursive-small">Feb 2023 - heden</p>
</div><br>
<div class="column">
<h4>BHV</h4>
<p>certificaat behaald</p>
<p class="cursive-small">Jun 2022</p>
</div><br>
<div class="column">
<h4>HAVO N&T, N&G</h4>
<p> Koningklijke Scholen Gemeenschap, Apeldoorn</p>
<p class="cursive-small">Sep 2016 - Jul 2021</p>
<p>Diploma behaald</p>
</div><br>
<div class="column">
<h4>Hockey scheidsrechter</h4>
<p>certificaat behaald</p>
<p class="cursive-small">2017</p>
</div>
<div class="column">
<h4>Sport Stage</h4>
<p> Ik heb in mijn 4e jaar van HAVO</p>
<p>voor BSM (bewegen, sport en maatschappij) bij AMHC Apeldoorn.</p>
<p>Ik heb hier twee keer per week training gegeven, voor 10 weken lang.</p>
</div>
</div>
</section>
<section id="werkervaring" class="section2">
<h2>Werkervaring</h2><br><br>
<div class="container">
<div class="column">
<h4>Keukenhulp</h4>
<p>SOAP, Apeldoorn</p>
<p class="cursive-small">Sep 2022 - heden</p><br>
</div>
<div class="column">
<H4>Afwashulp</H4>
<p>De Buren café & Tapas, Apeldoorn</p>
<p class="cursive-small">2019 - 2020</p><br>
</div>
<div class="column">
<h4>Boekenpakkketsamensteller (zomerwerk)</h4>
<p>Leermiddelenfonds KSG en Gymnasuim, Apeldoorn</p>
<p class="cursive-small">Jun 2021 - heden</p><br>
</div>
<div class="column">
<h4>Oppassen buurt kinderen</h4>
<p>Apeldoorn</p>
<p class="cursive-small">2018 - 2020</p><br>
</div>
<div class="column">
<h4>Kassamedewerker supermarkt</h4>
<p>DekaMarkt Imkersplaats, Apeldoorn</p>
<p class="cursive-small">Dec 2022 - Feb 2023</p><br>
</div>
<div class="column">
<h4>Jeugd hockeytrainer</h4>
<p>AMHC, Apeldoorn</p>
<p class="cursive-small">2017 - 2019</p>
</div>
</div>
</section>
<section id="vaardigheden" class="section2">
<h2>Vaardigheden</h2><br>
<div class="container">
<div class="column">
<div class="vaardigheden scroll-animation">
<div class="details">
<span>Databases</span>
</div>
<div class="lijn">
<div id="databases-lijn"></div>
</div>
</div><br>
</div>
<div class="column">
<div class="vaardigheden scroll-animation">
<div class="details">
<span>Webdevelopment</span>
</div>
<div class="lijn">
<div id="webdev-lijn"></div>
</div>
</div><br>
</div>
<div class="column">
<div class="vaardigheden scroll-animation">
<div class="details">
<span>Programmeren</span>
</div>
<div class="lijn">
<div id="programmeren-lijn"></div>
</div>
</div><br>
</div>
<div class="column">
<div class="vaardigheden scroll-animation">
<div class="details">
<span>Office</span>
</div>
<div class="lijn">
<div id="office-lijn"></div>
</div>
</div><br>
</div>
<div class="column">
<div class="vaardigheden scroll-animation">
<div class="details">
<span>Nederlands</span>
</div>
<div class="lijn">
<div id="nl-lijn"></div>
</div>
</div><br>
</div>
<div class="column">
<div class="vaardigheden scroll-animation">
<div class="details">
<span>Engels</span>
</div>
<div class="lijn">
<div id="en-lijn"></div>
</div>
</div><br>
</div>
</div>
</section>
<section id="competenties" class="section2">
<h2>Competenties</h2><br>
<div class="section3">
<p>Ik zie mijzelf als zelfverzekerd, zorgzaam en verandwoordelijk.</p>
<p>Ook ben ik goed in de leiding nemen en in een groep te werken.</p>
<p>Alleen werken is ook geen probleem, ik ben ook heel zelfstandig.</p>
<p>Ik houd van duidelijke communicatie.</p>
<p>creatief zijn en nieuwe dingen bedenken vind ik ook heel leuk.</p>
</div>
</section>
<section id="schoolprojecten" class="section2">
<h2>Schoolprojecten</h2><br>
<p>Ik ben natuurijk al even bezig met deze opleiding en heb al heel wat opdrachten moeten maken.</p>
<p>Hier een paar voorbeelden:</p>
<ul>
<li><a href="#webdev">Webdevelopment</a></li>
<li><a href="#programmeren">Programmeren</a></li>
<li><a href="#keuzendeel">Keuzendeel</a></li><br>
</ul>
<section id="webdev">
<h4>Webdevelopment</h4>
<p>We hebben al 3 periodes webdevelopment en dit is een voorbeeld van wat we hebben geleerd. </p>
<p>Voor deze opdracht moesten we een formulier maken die naam, adres, postcode, woonplaats en e-mail vroeg.</p>
<p>daarnaast moesten we de optie maken of de persoon zich wil aanmelden voor de nieuwsbrief en hoe het verstuurd wordt.</p><br>
<p class="codepen" data-height="600" data-default-tab="html,result" data-slug-hash="vYvQdqb" data-user="squeewy" style="height: 1000px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/squeewy/pen/vYvQdqb">
Webdevelopment formulier</a> by squeewy (<a href="https://codepen.io/squeewy">@squeewy</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</section><br><br><br><br>
<section id="programmeren">
<H4>Programmeren</H4>
<p>Ook programmeren hebben we nu al 3 periodes en hebben we al veel verschillende dingen gemaakt</p>
<p>Een van de dingen die ik het leuks vond om te maken was met Turtle. Dit is tekenen met code.</p>
<video width="640" height="480" controls>
<source src="turtle.circle-liselot.mp4" type="video/mp4">
</video>
<video width="640" height="480" controls>
<source src="turtle.turtle-liselot.mp4" type="video/mp4">
</video>
</section><br><br><br>
<section id="keuzendeel">
<h4>Keuzendeel</h4>
<p>Sinds deze periode heb ik het keuzendeel mobile aplications.</p>
<p>Dit is een best moeilijk keuzendeel voor een eerste jaar maar ik vind de uitdaging heel leuk.</p>
<p>Hier gebruiken we een programma voor genaamd 'epxo', dit kunnen we grbruiken om te zien wat we maken op onze telefoons.</p>
<p>Dit zijn een paar voorbeelden van wat we tot nu toe hebben gemaakt.</p><br><br>
<img src="helloworld-liselot.jpg" alt="hello world">
<img src="secondproject-liselot.jpg" alt="second project">
<img src="SecondProject2-liselot.jpg" alt="second project 2">
</section>
<footer>
<p>Project P3 Portfolio 2023</p>
</footer>
</body>
</html>
css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
color: #333;
}
.container{
display: flex;
flex-wrap: wrap;
}
.cursive-small {
font-size: smaller;
font-style: italic;
}
.column{
flex: 37%;
padding:10px;
align-items: center;
}
h4, p{
margin:0;
}
h2 {
border-bottom: 5px solid #333;
padding: 1rem;
}
header {
background-image: url('header-liselot.webp');
background-size: cover;
background-position: center;
height: 300px;
color: #333;
text-align: center;
padding: 1rem;
}
header img {
width: 150px;
height: 200px;
margin-bottom: 10px;
}
nav {
background-color: #333;
position: relative;
z-index: 999;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
background-color: #444;
padding: 0.5rem 0;
}
nav li {
display: inline-block;
margin: 0 1rem;
position: relative;
}
nav a {
text-decoration: none;
color: #fff;
transition: color 0.3s ease;
display: block;
padding: 10px 20px;
}
nav ul ul {
position: absolute;
top: 100%;
display: none;
background-color: #444;
}
nav ul ul li {
display: block;
}
nav li:hover ul {
display: block;
}
nav ul ul li a:hover {
background-color: #555;
}
nav a:hover {
color: #c6cacd;
}
.section1 {
padding: 2rem;
background-color: #fff;
color: #333;
text-align: center;
}
.section2 {
padding: 2rem;
background-color: #fff;
color:#333;
}
.section3 {
padding: 2rem;
background-color: #fff;
color:#333;
}
.details{
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.lijn{
position: relative;
width: 70%;
border: 2px solid #e7c0b4;
border-radius: 20px;
}
.lijn div{
position: relative;
width: 0;
height: 9px;
border-radius: 10px;
background-color: #e7c0b4;
}
.skills:not(:last-child){
margin-bottom: 30px;
}
#databases-lijn {
animation: databases-fill 4s forwards;
}
@keyframes databases-fill {
100% {
width: 20%;
}
}
#webdev-lijn {
animation: webdev-fill 4s forwards;
}
@keyframes webdev-fill {
100% {
width: 40%;
}
}
#programmeren-lijn {
animation: programmeren-fill 4s forwards;
}
@keyframes programmeren-fill {
100% {
width: 20%;
}
}
#office-lijn {
animation: office-fill 4s forwards;
}
@keyframes office-fill {
100% {
width: 70%;
}
}
#nl-lijn {
animation: nl-fill 4s forwards;
}
@keyframes nl-fill {
100% {
width: 100%;
}
}
#en-lijn {
animation: en-fill 4s forwards;
}
@keyframes en-fill {
100% {
width: 80%;
}
}
a {
text-decoration: none;
color: #333;
transition: color 0.3s ease;
display: block;
padding: 10px 20px;
}
ul ul li {
display: block;
}
li:hover ul {
display: block;
}
a:hover {
color: #0d7a9e;
}
video{
padding: 1rem;
}
img{
height: 600px;
width: 300px;
justify-content: center;
position: relative;
margin-inline: 40px;
}
footer {
display: flex;
justify-content: center;
background-color: #444;
color:#fff;
padding: 0.5rem 0;
width: 100%;
}
javascript:
function handleIntersection(entries, observer) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// Add your animation class to the element
entry.target.classList.add('scroll-animation'); // Change 'animate' to the actual animation class name
// Stop observing this element once it has animated
observer.unobserve(entry.target);
}
});
}
// Define options for the Intersection Observer
const options = {
root: null, // Use the viewport as the root
rootMargin: '0px', // No margin
threshold: 0.5, // 50% of the target element must be in the viewport
};
// Create an Intersection Observer instance
const observer = new IntersectionObserver(handleIntersection, options);
// Observe each element with the 'scroll-animation' class
const animatedElements = document.querySelectorAll('.scroll-animation');
animatedElements.forEach((element) => {
observer.observe(element);
});
the animations work but not the happen before in viewport