Posts by: Obada Qawwas (admin)
Type: resources /
http://admiretheweb.com in Inspiration Tags: Articles, Conferences, Jobs, Templates, Videos.
Type: snippets /
React.js Hotel Reservation System 🚀 in Javascript This project was bootstrapped with Create React App. The project includes extra packages and improved file structure. Animations with React transition group. Testing. Manage stepsState with Redux. Better styling for the date field to support mobile devices. You can always navigate between the completed steps from the steps indicators or by…
Type: snippets /
React.js API Consumer 🚀 in React This project was bootstrapped with Create React App. The project includes extra packages and improved file structure. axios redux react-redux redux-saga redux-devtools-extension react-router-dom react-router-redux This project gets its data from Artic EDU (The Art Institute of Chicago) for demo purposes, it's an open API and doesn't require a key. View its…
Type: snippets /
React.js Slot Machine 🚀 in React Simple and functional slot machine project bootstrapped with Create React App and includes extra useful dependencies with tests for all the used components and hooks. This project was bootstrapped with Create React App. The project includes extra packages and improved file structure. https://onyxdev.net/files/battlefield/react/react-slot-machine/ @testing-library/react-hooks @types/enzyme @wojtekmaj/enzyme-adapter-react-17 - an unofficial package for…
Type: snippets /
Organizational chart with D3.js, expandable, zoomable, and fully initialized in Javascript D3.js is a JavaScript library for manipulating documents based on data; however, it doesn't give you any clue on how to make an organizational chart! Thanks to Julien Henri Reszka's great example on Observablehq.com, now we have a great boilerplate we can start with. The thought of building an expandable…
Type: snippets /
Form example send emails with attachments using Dropzone.js and PHPMailer in Javascript In this snippet, I'm sharing with you a project request form (Project Planner) with custom styled checkboxes buttons and file upload using Dropzone.js and sends emails using PHPMailer with a thank you message, fully configured and ready to use. For those who didn't hear about DropzoneJS, it's an open-source library…
Type: snippets /
SVG colored lines interact with mousemove in Javascript In my journey to understand the SVG (Scalable Vector Graphics), I went through a very lovely website called The Bézier Game, they made a very interesting experience for colored lines interact with mousemove, they wrote the JS code in a proficient way that is easy to edit and understand. So…
Type: snippets /
DropzoneJS example with a powerful PHP code to upload/delete file in Javascript DropzoneJS has been around for a couple of years now, and various features can be used in clever ways. I wanted here to share with you a full example with DropzoneJS and what you can do with it, made nice and easy including the PHP function to handle the file…
Type: snippets /
Form validation with Google invisible recaptcha in Javascript A ready out of the box example for a powerful registration form that includes Bootstrap form validation, Google invisible recaptcha, Ajax request after recaptcha's challenge succeed to validate it in the server-side. Integrating Form validation with Google recaptcha is a great way to protect your site from spams and attacks…
Type: snippets /
Events timeline slider with Swiper Slider in Javascript Timeline, in the digital world, is a way of narrating a story in the chronological order. Reading a list of dates and events in a table is never as interesting as creating an interactive timeline slider that’s slides smoothly and works in all browsers with touch gestures. So here I…
Type: snippets /
Isotope with pagination, filters, lazyloading in Javascript Today I’d like to share with you some experimental Isotope functions from a recent project I was working on, where we had to use Isotope with pagination functionality with filtering and lazy loading. The idea was that we want to take each image and calculate its width and height from…
Type: resources /
http://tympanus.net in Web Nuggets Tags: Code stuff, HTML, Javascript, JQuery, Nuggets.
Type: resources /
http://hakim.se in Web Nuggets Tags: Code stuff, HTML, Javascript, JQuery, Nuggets.
Type: resources /
http://codyhouse.co in Web Nuggets Tags: Code stuff, HTML, Javascript, JQuery, Nuggets.
Type: resources /
http://codemyui.com in Web Nuggets Tags: Code stuff, HTML, Javascript, JQuery, Nuggets.
