3D Name
Γραμματα με κινηση τυπου 3D. Στο παρακάτω παράδειγμα παρουσιάζεται ένας τρόπος να εμφανίσουμε κειμενο στην οθονη με 3D χαρακτηριστικά!
Ασκήσεις
Carusel
Responsive Image Carousel ( Animation ). Εδώ έχουμε έναν διαφορετικό τρόπο μετακύλισης εικόνων με πιθανή χρήση σε portfolio φωτογραφου!
Guess The Hidden Number
Στο παρακάτω παραδειγμα ο χρήστης έχει τη δυνατότητα να μαντέψει το κρυμμένο αριθμό. Εμφανίζονται τρεις κάρτες με αριθμούς, εκ των οποίων η μια ειναι κρυφή. ...
Interactive Charts with Chart.js
Το παρακάτω παράδειγμα δημιουργεί διαδραστικά γραφήματα χρησιμοποιώντας τη βιβλιοθήκη Chart.js. Τα γραφήματα εμφανίζουν δεδομένα με διάφορες οπτικοποιήσεις, ...
Interactive Product Catalog with Form Submission
Αυτό το διαδραστικό παράδειγμα κώδικα παρουσιάζει έναν κατάλογο προϊόντων που επιτρέπει στους χρήστες να προσθέτουν νέα προϊόντα μέσω μιας φόρμας. Τα προϊόντ...
Palindrome Checker
Καρκινικές επιγραφές ή καρκίνοι ονομάζονται συμμετρικές φράσεις οι οποίες μπορούν να διαβαστούν το ίδιο είτε από την αρχή είτε από το τέλος.Για την λόγο αυτό...
Stimulus 1
To Stimulus JS είναι ένα εργαλείο javascript για frond end τύπου framework όπου προγραμματίζεται η διάδραση μέσω data-attributes που υπάρχουν στην γλώσσα jav...
Stimulus 2
To Stimulus JS είναι ένα εργαλείο javascript για frond end τύπου framework όπου προγραμματίζεται η διάδραση μέσω data-attributes που υπάρχουν στην γλώσσα jav...
Take a Wish!
Στο παρακάτω παραδειγμα ο χρήστης μπορεί να πατήσει το κουμπί απο εναν αριθμό και να εμφανιστεί μια ευχή. Ο χρήστης μπορεί να πατήσει όσα κουμπιά θέλει, όσες...
TodoList
Μια λίστα υποχρεώσεων είναι μια λίστα στοιχείων που πρέπει να συμπληρωθούν. Τα στοιχεία της λίστας μπορεί να κυμαίνονται από απλές δραστηριότητες, όπως απάντ...
Button
Διαδραστικό παράδειγμα κώδικα που δημιουργεί ένα κουμπί που εκτελεί διαφορετικές λειτουργίες κατά το Hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκ...
Calculator
Παράδειγμα οπτικής και λειτουργικής εξομοίωσης αριθμομηχανής.
Camera motion color
Διαδραστικό παράδειγμα κώδικα με χρήση κάμερας. Στο παράδειγμα υπάρχει ένα πλαίσιο πράσινου χρώματος . Όταν εντοπιστεί κίνηση μέσα στο πλαίσιο αλλάζει το χρώ...
Camera motion
Διαδραστικό παράδειγμα κώδικα με χρήση κάμερας. Στο παράδειγμα υπάρχει δύο διαφορετικά πλαίσια (πράσινο και κόκκινο). Όταν εντοπιστεί κίνηση σε κάποιο πλαίσι...
CSS queries
Παράδειγμα κώδικα με σκοπό να γίνει κατανοητή η χρήση των CSS media queries. Αλλάζοντας το μέγεθος του παραθύρου του περιηγητή (browser) σας αλλάζει το χρώμα...
Programmable WEB interactivity
Generic pαράδειγμα διαδραστικού κώδικα που χρησιμοποιεί javascript με ελάχιστη HTML και χρησιμοποιεί τις ιδιότητες του DOM (Document Object Model) και του CS...
Famous Quotes
Αυτό το διαδραστικό παράδειγμα κώδικα δημιουργεί μια απλή εφαρμογή για τυχαία αποφθέγματα. Με κάθε κλικ πάνω στο κουμπί new quote φορτώνει ένα καινούργιο τυχ...
Fibonacci
Διαδραστικό παράδειγμα κώδικα για το αν ένας αριθμός είναι Fibonacci ( https://en.wikipedia.org/wiki/Fibonacci_sequence ). Ο χρήστης εισάγει τον αριθμό μέσω ...
Firebase form
Η φόρμα χρησιμοποιεί την δικτυακή βάση δεδομένων firebase.
Animate with mouse slider
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή ελέγχου της κίνησης αντικειμένου on screen. Η κύλιση του χειριστιρίου του slider δίνει ...
Form validation
Το παράδειγμα αυτό βασίζεται σε regular expression για να εντοπίσει σφάλματα στην είσοδου του χρήστη.
Google Charts Visualization
Παράδειγμα που παρουσιάζει το πληθυσμό και GDP Κύπρου και Ελλάδας. Το γράφημα αλλάζει μέσω ενός dropdown menu.
Google maps
Έυρεση τοποθεσίας χρήστη χρησιμοποιώντας το Google Maps API (https://developers.google.com/maps/?hl=en).
3D image
Διαδραστικό παράδειγμα εικόνων χρησιμοποιώντας την τεχνική parallax. Στο συγκεκριμένο παράδειγμα η τεχνική αυτή δημιουργεί την αίσθηση του 3d περιβαλλντος. Ο...
Image processing
Παράδειγμα διαδραστικού κώδικα στον οποίο όταν εκτελείται από το χρήστη η λειτουργία hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκεκριμένο παράδει...
Image zoom
Παράδειγμα διαδραστικού κώδικα στον οποίο όταν εκτελείται από το χρήστη η λειτουργία hover (κίνηση του ποντικιού πάνω από την εικόνα στο συγκεκριμένο παράδει...
Image
Διαδραστικό παράδειγμα κώδικα που εισάγει μια εικόνα τύπου SVG (https://en.wikipedia.org/wiki/Scalable_Vector_Graphics). Όταν εκτελείται από το χρήστη η λειτ...
Interactive Text
Διαδραστικό παράδειγμα κώδικα που δημιουργεί ειδικά εφέ κατά το Hover (κίνηση του ποντικιού πάνω από την εικόνα) πάνω στο κείμενο. Για τη δημιουργία αυτών τω...
Keyboard input
Μετακίνηση αντικειμένου μέσω πληκτρολογίου (html Canvas)
Maps location
Εύρεση τοποθεσίας μέσω της χρήσης φόρμας εισόδου και του Google Maps API (https://developers.google.com/maps/?hl=en).
Menu CSS
Παράδειγμα εναλλακτικού μενού χωρίς τη χρήση Javascript. Για τη δημιουργία της διάδρασης έχει χρησιμοποιηθεί ο CSS preprocessor SCSS.
Menu dropdown
Διαδραστικό παράδειγμα dropdown μενού χωρίς τη χρήση Javascript.
Menu empty
Παράδειγμα εναλλακτικού μενού χωρίς ενσωματωμένες λειτουργίες.
Menu pie
Διαδραστικό παράδειγμα πολύπλοκου κυκλικού μενού. Με την επιλογή του κουμπιού “open” από το χρήστη, εμφανίζονται μια σειρά από πιθανές επιλογές.
Menu scroll
Διαδραστικό παράδειγμα responsive μενού σε One page template χρησιμοποιώντας τη βιβιοθήκη Τwitter Βootstrap 3.0 . Στο παράδειγμα εμφανίζεται το μενού έπειτα ...
Menu slide
Παράδειγμα slide μενού χωρίς ενσωματωμένες λειτουργίες.
Mouse button
Παράδειγμα διαδραστικού κώδικα όπου ο χρήστης χρησιμοποιώντας το ποντίκι, πατώντας το κουμπί “ANOTHER” μπορεί να αλλάξει τα εκτυπωμένα μηνύματα.
Mouse draw
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή εισόδου. Ο χρήστης μπορεί να χρησιμοποιήσει το ποντίκι για να σχεδιάσει στη λευκή επιφά...
Mouse eraser
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως “σβηστήρι”. Υπάρχουν δύο διαθέσιμες εικόνες και η μία σβήνει μετακινώντας τον κέρσορα για να απ...
Mouse form
Παράδειγμα εισόδου μέσω της συσκευής Ποντίκι Νο.4
Mouse option
Παράδειγμα διαδραστικού κώδικα όπου ο χρήστης χρησιμοποιώντας το ποντίκι, μπορεί να αλλάξει δυναμικά το περιεχόμενο που θα εμφανίζεται στη σελίδα. Για το σκο...
Mouse scroll
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή εισόδου και δίνει ως έξοδο το ανάλογο αποτέλεσμα στην οθόνη. Για να αλλάξει η τιμή εισό...
Nav Bar
Παράδειγμα διαδραστικού κώδικα όπου ο χρήστης χρησιμοποιώντας το ποντίκι, μπορεί να κάνει κλικ σε κάθε μία από τις επιλογές της navigation bar.
Plyr video player
Το βίντεο χρησιμοποιεί για τον έλεγχο το σύστημα αναπαραγωγής της βιβλιοθήκης Plyr.
Random Password Generator
Αυτό το διαδραστικό παράδειγμα κώδικα δημιουργεί μια εφαρμογή για τη δημιουργία κωδικών πρόσβασης για το χρήστη. Ο χρήστης μπορεί να επιλέξει το μέγεθος του ...
Shopping List
Αυτό το παράδειγμα δημιουργεί μια απλή λίστα χρησιμοποιώντας HTML και JavaScript. Tο παράδειγμα σας δίνει ένα βασικό πλαίσιο για τη δημιουργία μιας λίστας κ...
Sortable list
Παράδειγμα διαδραστικού κώδικα που ταξινομεί μια λίστα με τη χρήση του ποντικιού. Χρησιμοποιείται το στοιχείο sortable της JavaScript βιβλιοθήκης JQueryUI (...
Switch
Διαδραστικό παράδειγμα κώδικα που αναπαριστά τη λειτουργία ενός διακόπτη. Ο χρήστης μπορεί να επιλέξει ανάμεσα στις επιλογές ON και OFF. Για τη δημιουργία το...
Visualization dataset
Διαδραστικό παράδειγμα γραφήματος χρησιμοποιώντας τη βιβλιοθήκη d3.js (http://d3js.org). Το παράδειγμα οπτικοποιεί 2 διαφορετικά σετ δεδομένων (datasets).
Visualization
Παράδειγμα διαδραστικού γραφήματος No.1
Weather API
Αυτό το διαδραστικό παράδειγμα κώδικα δημιουργεί μια εφαρμογή για την ανάγνωση των καιρικών συνθηκών σε μια πόλη. Ο χρήστης πληκτρολογώντας το όνομα της πόλη...
YouTube video player
Παράδειγμα διαδραστικού κώδικα που χρησιμοποιεί το ποντίκι ως συσκευή εισόδου. Το βίντεο χρησιμοποιεί για την έναρξη και την παύση του το σύστημα αναπαραγωγή...
Ιnteractive calendar with reminders
Αυτό το έργο είναι ένα διαδραστικό ημερολόγιο με λειτουργικότητα υπενθυμίσεων. Οι χρήστες μπορούν να προσθέσουν υπενθυμίσεις για συγκεκριμένες ημερομηνίες ει...