CodeTinker
@codetinker.co.uk
My name is John and I'm experimenting with frontend web development. I'm not an expert, I just do it for fun! #creativity #coding #design https://codepen.io/John-Carruthers
Reposted by CodeTinker
😮 Two of my favourite people, talking about one of the most important topics for anyone working in web dev!
October 31, 2025 at 2:38 PM
😮 Two of my favourite people, talking about one of the most important topics for anyone working in web dev!
Reposted by CodeTinker
October 29, 2025 at 5:40 PM
Simple web form with a bit of CSS for decorative reasons and the use of Javascript to search through an array of words.
codepen.io/John-Carruth...
codepen.io/John-Carruth...
Search
Simple search form....
codepen.io
September 28, 2025 at 9:10 PM
Simple web form with a bit of CSS for decorative reasons and the use of Javascript to search through an array of words.
codepen.io/John-Carruth...
codepen.io/John-Carruth...
Photo I took with my dog and bone. iPhone15
September 25, 2025 at 6:43 PM
Photo I took with my dog and bone. iPhone15
Reposted by CodeTinker
A commenter brought up that it was be useful if we could declare what type of sizing is being used on each axis independently...
September 24, 2025 at 5:40 PM
A commenter brought up that it was be useful if we could declare what type of sizing is being used on each axis independently...
Form design with #HTML and #CSS and a simple search function using some #Javascript
I'm aware there are probably far better ways to achieve this result, but I'm Tinkering with code.
codepen.io/John-Carruth...
I'm aware there are probably far better ways to achieve this result, but I'm Tinkering with code.
codepen.io/John-Carruth...
Search
Simple search form....
codepen.io
September 22, 2025 at 11:12 PM
Form design with #HTML and #CSS and a simple search function using some #Javascript
I'm aware there are probably far better ways to achieve this result, but I'm Tinkering with code.
codepen.io/John-Carruth...
I'm aware there are probably far better ways to achieve this result, but I'm Tinkering with code.
codepen.io/John-Carruth...
Even thought I’ve probably written thousands of lines of code across various programming languages not to mention JavaScript and PHP I always feel like my code should be better.🫣
September 2, 2025 at 3:22 PM
Even thought I’ve probably written thousands of lines of code across various programming languages not to mention JavaScript and PHP I always feel like my code should be better.🫣
Messing around with responsive layouts and Grid. Go to say Grid can cope with being responsive without the need for '@media' . No JavaScript either.
codepen.io/John-Carruth...
codepen.io/John-Carruth...
Responsive Grid Design
...
codepen.io
August 31, 2025 at 11:22 PM
Messing around with responsive layouts and Grid. Go to say Grid can cope with being responsive without the need for '@media' . No JavaScript either.
codepen.io/John-Carruth...
codepen.io/John-Carruth...
Using CSS cos & sin with some animation. You can create some interesting effects.
codepen.io/John-Carruth...
codepen.io/John-Carruth...
Icon Circles Exp
...
codepen.io
August 31, 2025 at 11:14 PM
Using CSS cos & sin with some animation. You can create some interesting effects.
codepen.io/John-Carruth...
codepen.io/John-Carruth...
So, I wrote this a while back when I was working on a Help Desk project. Never ended up using. but it works. The code searches for element with IDs within a given element. I have created a #codepen for it.
codepen.io/John-Carruth...
codepen.io/John-Carruth...
August 30, 2025 at 3:59 PM
So, I wrote this a while back when I was working on a Help Desk project. Never ended up using. but it works. The code searches for element with IDs within a given element. I have created a #codepen for it.
codepen.io/John-Carruth...
codepen.io/John-Carruth...
Using Javascript to facilitate the dragging of elements is a challenge. While this kinda works but not fluid and gets stuck, so it's far from perfect. Plus it's a very simple. Sorry about the colour choices... 🫣
codepen.io/John-Carruth...
codepen.io/John-Carruth...
MouseDrag
...
codepen.io
August 30, 2025 at 1:56 AM
Using Javascript to facilitate the dragging of elements is a challenge. While this kinda works but not fluid and gets stuck, so it's far from perfect. Plus it's a very simple. Sorry about the colour choices... 🫣
codepen.io/John-Carruth...
codepen.io/John-Carruth...
So, I changed up the simple notes app and gave it my own twist (Yes, the code is mine!). I'm pretty sure there are better more concise ways to write the code but you can only learn by doing. Still needs some small tweaks where the search bar is concerned. But it works!
codepen.io/John-Carruth...
codepen.io/John-Carruth...
Brain Declutter
A simple Web App to help declutter your brain. Still requires some work. But the base functionality is working. TODO: Reactor HTML Refactor some of th...
codepen.io
August 30, 2025 at 1:38 AM
So, I changed up the simple notes app and gave it my own twist (Yes, the code is mine!). I'm pretty sure there are better more concise ways to write the code but you can only learn by doing. Still needs some small tweaks where the search bar is concerned. But it works!
codepen.io/John-Carruth...
codepen.io/John-Carruth...
Generated in Adobe Firefly...
August 28, 2025 at 4:54 PM
Generated in Adobe Firefly...
I should probably add some comments to my code...🫣 But these are just messing about with HTML, CSS and some Javascript.
August 28, 2025 at 4:38 PM
I should probably add some comments to my code...🫣 But these are just messing about with HTML, CSS and some Javascript.
A simple ToDo List Application (Link anyone needs more to do!)
codepen.io/John-Carruth...
codepen.io/John-Carruth...
ToDo App (Revisions)
Web App ToDo List using this to experiment with event delegation. Work in progress. Things still need doing: -needs to be responsive. -add ToDo orde...
codepen.io
August 28, 2025 at 4:31 PM
A simple ToDo List Application (Link anyone needs more to do!)
codepen.io/John-Carruth...
codepen.io/John-Carruth...
A Calculator of sorts...
codepen.io/John-Carruth...
codepen.io/John-Carruth...
Calculator just because...
This is a work in progress. There are probably better ways to achieve the same result. There are a few features that need work....
codepen.io
August 28, 2025 at 4:26 PM
A Calculator of sorts...
codepen.io/John-Carruth...
codepen.io/John-Carruth...
Basic exploration of a form
codepen.io/John-Carruth...
codepen.io/John-Carruth...
Exploring Forms
Just playing with forms and CSS plus a little JS...
codepen.io
August 28, 2025 at 4:25 PM
Basic exploration of a form
codepen.io/John-Carruth...
codepen.io/John-Carruth...
Exploring element selection with Javascript...
codepen.io/John-Carruth...
codepen.io/John-Carruth...
JS Element Selector
...
codepen.io
August 28, 2025 at 4:21 PM
Exploring element selection with Javascript...
codepen.io/John-Carruth...
codepen.io/John-Carruth...
My first post!
codeTinker = true;
codeTinker = true;
August 27, 2025 at 11:02 PM
My first post!
codeTinker = true;
codeTinker = true;